kd-aiot-frontend-vis/src/views/tianzhu/rawMaterialAnalysis.vue

<template>
  <div class="page">
    <header class="header">
      <el-button
        icon="el-icon-back"
        @click="$router.push('/tianzhu/raw-material')"
        >返回总览</el-button
      >
      <h2>{{ config.title }}</h2>
      <div class="filters">
        <el-date-picker
          v-model="range"
          type="daterange"
          value-format="yyyy-MM-dd"
          :clearable="false"
          range-separator="至"
        />
        <el-input
          v-model="rawMaterialName"
          clearable
          placeholder="原材料品类名称"
        />
        <el-input v-model="supplierName" clearable placeholder="供应商名称" />
        <el-button
          type="primary"
          icon="el-icon-search"
          :loading="loading"
          @click="load"
          >查询</el-button
        >
      </div>
    </header>
    <p v-if="notice" class="note">{{ notice }}</p>
    <el-alert v-if="error" type="error" :title="error" :closable="false" />
    <main>
      <section v-for="item in config.charts" :key="item.key" class="panel">
        <h3
          >{{ item.title }}<span>{{ item.unit }}</span></h3
        >
        <div :ref="item.key" class="chart"></div>
      </section>
    </main>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    getRawMaterialInventoryMonitoring,
    getRawMaterialPurchaseAnalysis,
    getRawMaterialSupplierAnalysis,
    getRawMaterialTransportWeighingAnalysis
  } from '@/api/tianzhu/rawMaterial';

  const pad = (n) => String(n).padStart(2, '0');
  const formatDate = (d) =>
    d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
  const value = (v) => Number(v || 0);
  const todayRange = () => {
    const now = new Date();
    return [
      formatDate(new Date(now.getFullYear(), now.getMonth(), 1)),
      formatDate(now)
    ];
  };
  const dayOf = (time) => String(time || '').slice(0, 10);
  const previousDay = (time) => {
    const d = new Date(dayOf(time) + 'T00:00:00');
    d.setDate(d.getDate() - 1);
    return formatDate(d);
  };

  const pageConfig = {
    supplier: {
      title: '供应商分析',
      loader: getRawMaterialSupplierAnalysis,
      noticeKey: 'supplyQuantityNotice',
      charts: [
        {
          key: 'supplierRanks',
          title: '供应商供货量排名',
          unit: '单位：t',
          type: 'rank',
          rows: 'supplierRanks'
        },
        {
          key: 'supplierCompare',
          title: '供应商净重与供货数量对比',
          unit: '净重(t) / 供货数量',
          type: 'compare',
          rows: 'supplierQuantityComparisons'
        }
      ]
    },
    material: {
      title: '原材料采购分析',
      loader: getRawMaterialPurchaseAnalysis,
      charts: [
        {
          key: 'materialPurchase',
          title: '各原材料采购量对比',
          unit: '单位：t',
          type: 'bar',
          rows: 'materialPurchaseVolumes'
        },
        {
          key: 'warehouseInbound',
          title: '储料仓库存分布',
          unit: '单位：t',
          type: 'pie',
          rows: 'warehouseInboundDistributions'
        }
      ]
    },
    inventory: {
      title: '库存监控',
      loader: getRawMaterialInventoryMonitoring,
      noticeKey: 'inventoryBalanceNotice',
      charts: [
        {
          key: 'balanceTrend',
          title: '库存余额趋势',
          unit: '单位：t',
          type: 'area',
          rows: 'inventoryBalanceTrends'
        },
        {
          key: 'inboundConsumption',
          title: '进料 vs 消耗对比',
          unit: '单位：t',
          type: 'inout',
          rows: 'inboundConsumptionTrends'
        }
      ]
    },
    transport: {
      title: '运输与过磅分析',
      loader: getRawMaterialTransportWeighingAnalysis,
      charts: [
        {
          key: 'vehicleRank',
          title: '车辆运输量排名',
          unit: '单位：t',
          type: 'rank',
          rows: 'vehicleTransportRanks'
        },
        {
          key: 'receiptWay',
          title: '收料方式占比',
          unit: '单位：车次',
          type: 'pie',
          rows: 'receiptWayRatios'
        },
        {
          key: 'dailyTrips',
          title: '每日车次趋势',
          unit: '单位：车次',
          type: 'line',
          rows: 'dailyPurchaseTrips'
        }
      ]
    }
  };

  export default {
    name: 'TianzhuRawMaterialAnalysis',
    data() {
      const q = this.$route.query;
      const range =
        q.startTime && q.endTime
          ? [dayOf(q.startTime), previousDay(q.endTime)]
          : todayRange();
      return {
        range,
        rawMaterialName: q.rawMaterialName || '',
        supplierName: q.supplierName || '',
        data: {},
        error: '',
        loading: false,
        charts: [],
        drawTimer: null,
        resizeTimer: null,
        lateResizeTimer: null
      };
    },
    computed: {
      type() {
        return this.$route.meta.drillType || 'supplier';
      },
      config() {
        return pageConfig[this.type] || pageConfig.supplier;
      },
      notice() {
        return this.config.noticeKey ? this.data[this.config.noticeKey] : '';
      }
    },
    watch: {
      '$route.meta.drillType'() {
        this.load();
      }
    },
    mounted() {
      window.addEventListener('resize', this.resize);
      this.load();
    },
    activated() {
      this.scheduleDraw();
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.resize);
      clearTimeout(this.drawTimer);
      clearTimeout(this.resizeTimer);
      clearTimeout(this.lateResizeTimer);
      this.dispose();
    },
    methods: {
      query() {
        const end = new Date(this.range[1] + 'T00:00:00');
        end.setDate(end.getDate() + 1);
        const rawMaterialName = this.rawMaterialName.trim();
        const supplierName = this.supplierName.trim();
        return {
          startTime: this.range[0] + ' 00:00:00',
          endTime: formatDate(end) + ' 00:00:00',
          mixOrgId: this.$route.query.mixOrgId || undefined,
          rawMaterialName: rawMaterialName || undefined,
          supplierName: supplierName || undefined
        };
      },
      async load() {
        if (this.loading || !this.range || this.range.length !== 2) return;
        this.loading = true;
        this.error = '';
        try {
          this.data = (await this.config.loader(this.query())) || {};
          this.scheduleDraw();
        } catch (e) {
          this.error = e.message || '获取原材料下钻数据失败';
        } finally {
          this.loading = false;
        }
      },
      scheduleDraw() {
        clearTimeout(this.drawTimer);
        clearTimeout(this.resizeTimer);
        clearTimeout(this.lateResizeTimer);
        this.$nextTick(() => {
          this.drawTimer = setTimeout(() => {
            this.draw();
            this.resizeTimer = setTimeout(this.resize, 120);
            this.lateResizeTimer = setTimeout(this.resize, 500);
          }, 80);
        });
      },
      dispose() {
        this.charts.forEach((chart) => chart.dispose());
        this.charts = [];
      },
      resize() {
        this.charts.forEach((chart) => chart.resize());
      },
      init(key, rows) {
        const node = Array.isArray(this.$refs[key])
          ? this.$refs[key][0]
          : this.$refs[key];
        if (!node) return null;
        const chart = echarts.init(node);
        if (!rows.length)
          chart.setOption({
            graphic: [
              {
                type: 'text',
                left: 'center',
                top: 'middle',
                style: { text: '暂无数据', fill: '#83acd0', fontSize: 14 }
              }
            ]
          });
        this.charts.push(chart);
        return chart;
      },
      axis(unit) {
        return {
          type: 'value',
          name: unit,
          nameTextStyle: { color: '#9bc7eb' },
          axisLabel: { color: '#9bc7eb' },
          splitLine: {
            lineStyle: { color: 'rgba(105,175,226,.22)', type: 'dashed' }
          }
        };
      },
      draw() {
        this.dispose();
        this.config.charts.forEach((item) => {
          const rows = Array.isArray(this.data[item.rows])
            ? this.data[item.rows]
            : [];
          if (item.type === 'rank') this.rank(item.key, rows, 't');
          if (item.type === 'bar') this.bar(item.key, rows, 't');
          if (item.type === 'pie') this.pie(item.key, rows);
          if (item.type === 'line') this.line(item.key, rows, '车次');
          if (item.type === 'area') this.area(item.key, rows);
          if (item.type === 'inout') this.inout(item.key, rows);
          if (item.type === 'compare') this.compare(item.key, rows);
        });
      },
      rank(key, rows, unit) {
        const chart = this.init(key, rows);
        if (!chart || !rows.length) return;
        const sorted = [...rows].sort(
          (a, b) => value(b.value) - value(a.value)
        );
        chart.setOption({
          color: ['#20b7ff'],
          tooltip: {
            trigger: 'axis',
            valueFormatter: (v) => value(v).toLocaleString() + ' ' + unit
          },
          grid: { left: 128, right: 42, top: 22, bottom: 26 },
          xAxis: this.axis(unit),
          yAxis: {
            type: 'category',
            inverse: true,
            data: sorted.map((row) => row.name || '未标注'),
            axisLabel: { color: '#9bc7eb', width: 116, overflow: 'truncate' },
            axisLine: { lineStyle: { color: '#197abb' } }
          },
          series: [
            {
              type: 'bar',
              data: sorted.map((row) => value(row.value)),
              barMaxWidth: 24,
              label: {
                show: true,
                position: 'right',
                color: '#d8ecff',
                formatter: (p) => value(p.value).toLocaleString()
              },
              itemStyle: { borderRadius: [0, 4, 4, 0] }
            }
          ]
        });
      },
      bar(key, rows, unit) {
        const chart = this.init(key, rows);
        if (!chart || !rows.length) return;
        chart.setOption({
          color: ['#36e0a4'],
          tooltip: {
            trigger: 'axis',
            valueFormatter: (v) => value(v).toLocaleString() + ' ' + unit
          },
          grid: { left: 58, right: 18, top: 26, bottom: 62 },
          xAxis: {
            type: 'category',
            data: rows.map((row) => row.name || '未标注'),
            axisLabel: {
              color: '#9bc7eb',
              interval: 0,
              rotate: rows.length > 5 ? 28 : 0
            },
            axisLine: { lineStyle: { color: '#197abb' } }
          },
          yAxis: this.axis(unit),
          series: [
            {
              type: 'bar',
              data: rows.map((row) => value(row.value)),
              barMaxWidth: 34,
              itemStyle: { borderRadius: [4, 4, 0, 0] }
            }
          ]
        });
      },
      pie(key, rows) {
        const chart = this.init(key, rows);
        if (!chart || !rows.length) return;
        chart.setOption({
          color: ['#20b7ff', '#36e0a4', '#ffc54a', '#a582ff', '#ff7a7a'],
          tooltip: { trigger: 'item' },
          legend: {
            bottom: 0,
            type: 'scroll',
            textStyle: { color: '#a9cdeb' }
          },
          series: [
            {
              type: 'pie',
              radius: ['42%', '67%'],
              data: rows.map((row) => ({
                name: row.name || '未标注',
                value: value(row.value)
              })),
              label: { color: '#d7edff', formatter: '{b}\n{d}%' }
            }
          ]
        });
      },
      line(key, rows, unit) {
        const chart = this.init(key, rows);
        if (!chart || !rows.length) return;
        chart.setOption({
          color: ['#20b7ff'],
          tooltip: {
            trigger: 'axis',
            valueFormatter: (v) => value(v).toLocaleString() + ' ' + unit
          },
          grid: { left: 58, right: 18, top: 28, bottom: 36 },
          xAxis: {
            type: 'category',
            data: rows.map((row) => row.statDate),
            axisLabel: { color: '#9bc7eb' },
            axisLine: { lineStyle: { color: '#197abb' } }
          },
          yAxis: this.axis(unit),
          series: [
            {
              type: 'line',
              smooth: true,
              showSymbol: false,
              areaStyle: { opacity: 0.14 },
              data: rows.map((row) => value(row.value))
            }
          ]
        });
      },
      area(key, rows) {
        const chart = this.init(key, rows);
        if (!chart || !rows.length) return;
        chart.setOption({
          color: ['#ffc54a'],
          tooltip: {
            trigger: 'axis',
            valueFormatter: (v) => value(v).toLocaleString() + ' t'
          },
          grid: { left: 58, right: 18, top: 28, bottom: 36 },
          xAxis: {
            type: 'category',
            data: rows.map((row) => row.statDate),
            axisLabel: { color: '#9bc7eb' },
            axisLine: { lineStyle: { color: '#197abb' } }
          },
          yAxis: this.axis('t'),
          series: [
            {
              type: 'line',
              smooth: true,
              showSymbol: false,
              areaStyle: { opacity: 0.22 },
              data: rows.map((row) => value(row.endingInventory || row.value))
            }
          ]
        });
      },
      inout(key, rows) {
        const chart = this.init(key, rows);
        if (!chart || !rows.length) return;
        chart.setOption({
          color: ['#20b7ff', '#36e0a4'],
          tooltip: {
            trigger: 'axis',
            valueFormatter: (v) => value(v).toLocaleString() + ' t'
          },
          legend: { top: 0, textStyle: { color: '#a9cdeb' } },
          grid: { left: 58, right: 18, top: 42, bottom: 36 },
          xAxis: {
            type: 'category',
            data: rows.map((row) => row.statDate),
            axisLabel: { color: '#9bc7eb' },
            axisLine: { lineStyle: { color: '#197abb' } }
          },
          yAxis: this.axis('t'),
          series: [
            {
              name: '进料',
              type: 'bar',
              barMaxWidth: 28,
              data: rows.map((row) => value(row.purchaseVolume))
            },
            {
              name: '消耗',
              type: 'bar',
              barMaxWidth: 28,
              data: rows.map((row) => value(row.consumptionVolume))
            }
          ]
        });
      },
      compare(key, rows) {
        const chart = this.init(key, rows);
        if (!chart || !rows.length) return;
        chart.setOption({
          color: ['#20b7ff', '#ffc54a'],
          tooltip: { trigger: 'axis' },
          legend: { top: 0, textStyle: { color: '#a9cdeb' } },
          grid: { left: 58, right: 18, top: 42, bottom: 62 },
          xAxis: {
            type: 'category',
            data: rows.map((row) => row.name || '未标注'),
            axisLabel: {
              color: '#9bc7eb',
              interval: 0,
              rotate: rows.length > 5 ? 28 : 0
            },
            axisLine: { lineStyle: { color: '#197abb' } }
          },
          yAxis: this.axis(''),
          series: [
            {
              name: '净重(t)',
              type: 'bar',
              barMaxWidth: 26,
              data: rows.map((row) => value(row.value))
            },
            {
              name: '供货数量',
              type: 'bar',
              barMaxWidth: 26,
              data: rows.map((row) => value(row.compareValue))
            }
          ]
        });
      }
    }
  };
</script>

<style scoped>
  .page {
    min-height: 100vh;
    padding: 16px;
    color: #d8ecff;
    background: #020d28;
    background-image: linear-gradient(
        rgba(31, 93, 157, 0.12) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(31, 93, 157, 0.12) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #167fcd;
  }
  h2 {
    margin: 0;
    color: #fff;
    letter-spacing: 3px;
  }
  .filters {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .filters .el-date-editor {
    width: 260px;
  }
  .filters .el-input {
    width: 170px;
  }
  .note {
    margin: 12px 0 0;
    color: #87b7da;
    font-size: 12px;
  }
  main {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 12px;
    margin-top: 14px;
  }
  .panel {
    height: 310px;
    padding: 10px;
    border: 1px solid #167fcd;
    background: rgba(4, 37, 88, 0.86);
  }
  h3 {
    margin: 0;
    color: #e6f6ff;
    font-size: 14px;
  }
  h3 span {
    margin-left: 8px;
    color: #79a9ce;
    font-weight: normal;
    font-size: 12px;
  }
  .chart {
    height: 275px;
    width: 100%;
  }
  :deep(.el-input__inner) {
    background: #06265b;
    border-color: #167fcd;
    color: #d8ecff;
  }
  :deep(.el-range-input) {
    background: transparent;
    color: #d8ecff;
  }
  :deep(.el-range-separator),
  :deep(.el-input__icon) {
    color: #a9cdeb;
  }
  :deep(.el-button) {
    background: #06488e;
    border-color: #168ee1;
    color: #fff;
  }
  @media (max-width: 1000px) {
    main {
      grid-template-columns: 1fr;
    }
    .header {
      align-items: flex-start;
      flex-direction: column;
    }
    .filters {
      justify-content: flex-start;
    }
    .filters .el-date-editor,
    .filters .el-input {
      width: 245px;
    }
  }
</style>