333

schangxiang@126.com

2025-09-19 18966e02fb573c7e2bb0c6426ed792b38b910940

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
  <div class="chart-wrapper">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <div class="haocai-title">物料出库排名</div>
      <span class="demonstration">出库时间</span>
      <el-date-picker v-model="outdate" class="w-400" type="daterange" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-form-item label="货主名称">
        <el-select v-model="formData.consignor_Id" placeholder="请选择" class="w-200">
          <el-option v-for="item in consignorNames" :key="item.consignor_Id" :label="item.consignorName" :value="item.consignor_Id" @click.native="()=>{
            formData.consignorCode=item.consignorCode;
            formData.consignorName=item.consignorName;
          }">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属仓库">
        <el-select v-model="formData.storage_Id" placeholder="请选择" class="w-200">
          <el-option v-for="item in storageNames" :key="item.storage_Id" :label="item.storageName" :value="item.storage_Id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getColumnData(formData)">查询</el-button>
      </el-form-item>
      <bar-chart ref="barchartInfo" :gutter="10" :xaxis-array="barXaxisArray" :series="barSeries" />
    </el-form>
  </div>
</template>
 
<script>
import BarChart from "../components/BarChart";
 
export default {
  components: {
    BarChart
  },
  data() {
    return {
      barXaxisArray: [],
      barSeries: [{ name: "", data: [] }],
      formData: {
        consignor_Id: null,
        storage_Id: null, // 仓库id
        storageName: null
      },
      // 货主 列表
      consignorNames: null,
      // 仓库 列表
      storageNames: null,
      outdate: ""
    };
  },
  mounted() {
    this.getColumnData();
    this.getConsignorList();
    this.getStorageList();
  },
  methods: {
    getColumnData() {
      var the = this;
      const consignor_Id = this.formData.consignor_Id;
      const storage_Id = this.formData.storage_Id;
      const startdate = this.outdate[0];
      const endtime = this.outdate[1];
      const url = "/api/dashboard/wms/getColumnData";
      const params = {
        consignor_Id: consignor_Id,
        storage_Id: storage_Id,
        startdate: startdate,
        endtime: endtime
      };
      var callback = res => {
        if (res.result) {
          this.barXaxisArray = [];
          this.barSeries = [{ name: "", data: [] }];
          this.dataInfo = res.data;
          this.barSeries[0].name = "订单数";
          this.dataInfo.forEach(row => {
            // this.barXaxisArray.push(row.year + "-" + row.month);
            this.barXaxisArray.push(row.name);
            this.barSeries[0].data.push(row.count);
          });
          window.setTimeout(function() {
            the.$refs.barchartInfo.initChart();
          }, 10);
        }
      };
      this.common.ajax(url, params, callback, true);
    },
    // 获取货主名称下拉框
    getConsignorList() {
      const url = "/api/basicInfo/base/consignor/getList";
      const params = {
        openNodeApi: true
      };
      var callback = res => {
        if (res.result) {
          this.consignorNames = res.data;
        }
      };
      this.common.ajax(url, params, callback);
    },
    // 获取仓库
    getStorageList() {
      const url = "/api/basicInfo/base/storage/getList";
      const params = {};
      var callback = res => {
        if (res.result) {
          this.storageNames = res.data;
        }
      };
      this.common.ajax(url, params, callback);
    }
  }
};
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
.chart-wrapper {
  background: #fff;
  padding: 16px 16px;
  margin-bottom: 10px;
  .haocai-title {
    text-align: center;
    color: #888;
    font-size: 18px;
    margin-bottom: 20px;
  }
}
</style>