klp-oa/klp-ui/src/views/wms/warehouse/record.vue

<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="操作时间" prop="createTimeRange">
        <el-date-picker clearable v-model="queryParams.createTimeRange" type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="创建人" prop="createBy">
        <el-input v-model="queryParams.createBy" placeholder="请输入创建人" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="出入库类型" prop="inOutType">
        <el-select v-model="queryParams.inOutType" placeholder="请选择类型" clearable @keyup.enter.native="handleQuery">
          <el-option label="入库" :value="1" />
          <el-option label="出库" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型" prop="operationType">
        <el-select v-model="queryParams.operationType" placeholder="请选择类型" clearable @keyup.enter.native="handleQuery">
          <el-option label="收货" :value="1" />
          <el-option label="加工" :value="2" />
          <el-option label="调拨" :value="3" />
          <el-option label="发货" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <!-- 统计指标卡 -->
    <el-row :gutter="10" class="mb10">
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{ padding: '10px' }">
          <div class="stat-card">
            <div class="stat-icon stat-icon-primary">
              <i class="el-icon-document"></i>
            </div>
            <div class="stat-content">
              <div class="stat-title">操作记录总数</div>
              <div class="stat-value">{{ stats.totalCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{ padding: '10px' }">
          <div class="stat-card">
            <div class="stat-icon stat-icon-success">
              <i class="el-icon-s-finance"></i>
            </div>
            <div class="stat-content">
              <div class="stat-title">总重量</div>
              <div class="stat-value">{{ stats.totalWeight }} kg</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{ padding: '10px' }">
          <div class="stat-card">
            <div class="stat-icon stat-icon-warning">
              <i class="el-icon-location"></i>
            </div>
            <div class="stat-content">
              <div class="stat-title">涉及库位</div>
              <div class="stat-value">{{ stats.warehouseCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 操作人汇总表格 -->
    <el-card shadow="hover" :body-style="{ padding: '10px' }" class="mb10">
      <div slot="header" class="clearfix" style="padding-bottom: 5px;">
        <span>操作记录趋势</span>
      </div>
      <div id="trendChart" style="height: 250px;"></div>
    </el-card>

    <!-- 图表区域 -->
    <el-row :gutter="10" class="mb10">
      <el-col :span="12">
        <el-card shadow="hover" :body-style="{ padding: '10px' }">
          <el-table :data="userSummaryData" style="width: 100%" height="280px">
            <el-table-column prop="createBy" label="操作人" width="180"></el-table-column>
            <el-table-column prop="coilCount" label="操作卷数" width="120"></el-table-column>
            <el-table-column prop="totalWeight" label="总重量(kg)">
              <template slot-scope="scope">
                {{ scope.row.totalWeight.toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '10px' }">
          <div slot="header" class="clearfix" style="padding-bottom: 5px;">
            <span>操作人分布（饼图）</span>
          </div>
          <div id="pieChart" style="height: 250px;"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '10px' }">
          <div slot="header" class="clearfix" style="padding-bottom: 5px;">
            <span>操作人分布（柱状图）</span>
          </div>
          <div id="barChart" style="height: 250px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-table height="calc(100vh - 400px)" :data="coilWarehouseOperationLogList"
      @selection-change="handleSelectionChange">
      <el-table-column prop="createTime" label="操作时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="操作人" width="180">
        <template slot-scope="scope">
          {{ scope.row.createBy }}
        </template>
      </el-table-column>
      <el-table-column prop="operationType" label="操作类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.operationType === 1">收货</span>
          <span v-else-if="scope.row.operationType === 2">加工</span>
          <span v-else-if="scope.row.operationType === 3">调拨</span>
          <span v-else-if="scope.row.operationType === 4">发货</span>
          <!-- {{ scope.row.operationType === 1 ? '入库' : '出库' }} -->
        </template>
      </el-table-column>
      <el-table-column prop="inOutType" label="出入库类型" width="100">
        <template slot-scope="scope">
          {{ scope.row.inOutType === 1 ? '入库' : '出库' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.enterCoilNo" label="入场卷号" width="150">
        <template slot-scope="scope">
          {{ scope.row.coil && scope.row.coil.enterCoilNo ? scope.row.coil.enterCoilNo : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.currentCoilNo" label="当前卷号" width="150">
        <template slot-scope="scope">
          {{ scope.row.coil && scope.row.coil.currentCoilNo ? scope.row.coil.currentCoilNo : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.weight" label="重量">
        <template slot-scope="scope">
          {{ scope.row.coil && scope.row.coil.netWeight ? scope.row.coil.netWeight : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.specification" label="规格" width="180">
        <template slot-scope="scope">
          <ProductInfo v-if="scope.row.coil.itemType == 'product'" :product="scope.row.coil" />
          <RawMaterialInfo v-else-if="scope.row.coil.itemType === 'raw_material'" :material="scope.row.coil" />
        </template>
      </el-table-column>
      <el-table-column prop="warehouse.actualWarehouseName" label="库位">
        <template slot-scope="scope">
          {{ scope.row.warehouse && scope.row.warehouse.actualWarehouseName ? scope.row.warehouse.actualWarehouseName :
            '-' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button :loading="buttonLoading" type="danger" size="mini" icon="el-icon-delete"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="setPageData" />


  </div>
</template>

<script>
import { listCoilWarehouseOperationLog, delCoilWarehouseOperationLog } from "@/api/wms/coilWarehouseOperationLog";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import dayjs from "dayjs";
import * as echarts from "echarts";

export default {
  name: "CoilWarehouseOperationLog",
  components: {
    ProductInfo,
    RawMaterialInfo,
  },
  data() {
    // 筛选时间设置为本月时间
    const createTimeRange = [
      dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
      dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss')
    ];
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 钢卷库区操作记录表格数据
      coilWarehouseOperationLogList: [],
      // 原始数据（用于前端分页）
      allData: [],
      // 统计指标
      stats: {
        totalCount: 0,
        totalWeight: 0,
        warehouseCount: 0
      },
      // 操作人汇总数据
      userSummaryData: [],
      // 图表实例
      trendChart: null,
      pieChart: null,
      barChart: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        actualWarehouseId: undefined,
        createTimeRange: createTimeRange,
        operationType: undefined,
        inOutType: undefined,
        createTime: undefined,
        createBy: undefined,
      }
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    // 初始化图表
    this.initCharts();
  },
  beforeDestroy() {
    // 销毁图表实例
    if (this.trendChart) {
      this.trendChart.dispose();
    }
    if (this.pieChart) {
      this.pieChart.dispose();
    }
    if (this.barChart) {
      this.barChart.dispose();
    }
  },
  methods: {
    /** 查询钢卷库区操作记录列表 */
    getList() {
      this.loading = true;
      // 处理时间范围
      if (this.queryParams.createTimeRange) {
        this.queryParams.createStartTime = this.queryParams.createTimeRange[0];
        this.queryParams.createEndTime = this.queryParams.createTimeRange[1];
      }
      // 移除分页参数，获取全部数据
      const params = { ...this.queryParams, pageNum: 1, pageSize: 10000 };

      listCoilWarehouseOperationLog(params).then(response => {
        this.allData = response.rows;
        this.total = response.total;
        this.calculateStats();
        this.setPageData();
        this.loading = false;
      });
    },
    /** 设置分页数据 */
    setPageData() {
      const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
      const end = start + parseInt(this.queryParams.pageSize);
      this.coilWarehouseOperationLogList = this.allData.slice(start, end);
    },
    /** 计算统计指标 */
    calculateStats() {
      // 计算操作记录总数
      this.stats.totalCount = this.allData.length;

      // 计算总重量
      this.stats.totalWeight = this.allData.reduce((sum, item) => {
        if (item.coil && item.coil.netWeight) {
          return sum + parseFloat(item.coil.netWeight);
        }
        return sum;
      }, 0).toFixed(2);

      // 计算涉及的库位数量（去重）
      const warehouseIds = new Set();
      this.allData.forEach(item => {
        if (item.warehouse && item.warehouse.actualWarehouseId) {
          warehouseIds.add(item.warehouse.actualWarehouseId);
        }
      });
      this.stats.warehouseCount = warehouseIds.size;

      // 按操作人汇总数据
      const userMap = {};
      this.allData.forEach(item => {
        const user = item.createBy || '未知';
        if (!userMap[user]) {
          userMap[user] = {
            createBy: user,
            coilCount: 0,
            totalWeight: 0
          };
        }
        userMap[user].coilCount++;
        if (item.coil && item.coil.netWeight) {
          userMap[user].totalWeight += parseFloat(item.coil.netWeight);
        }
      });

      // 转换为数组并按操作卷数降序排序
      this.userSummaryData = Object.values(userMap).sort((a, b) => b.coilCount - a.coilCount);

      // 更新图表数据
      this.updateCharts();
    },
    /** 初始化图表 */
    initCharts() {
      // 趋势图
      this.trendChart = echarts.init(document.getElementById('trendChart'));
      // 饼图
      this.pieChart = echarts.init(document.getElementById('pieChart'));
      // 柱状图
      this.barChart = echarts.init(document.getElementById('barChart'));
    },
    /** 更新图表数据 */
    updateCharts() {
      this.updateTrendChart();
      this.updatePieChart();
      this.updateBarChart();
    },
    /** 更新趋势图 */
    updateTrendChart() {
      if (!this.trendChart) return;

      // 按日期分组数据
      const dateMap = {};
      this.allData.forEach(item => {
        const date = item.createTime.substring(0, 10);
        if (!dateMap[date]) {
          dateMap[date] = 0;
        }
        dateMap[date]++;
      });

      // 转换为数组并排序
      const dateArr = Object.keys(dateMap).sort();
      const dataArr = dateArr.map(date => dateMap[date]);

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: dateArr
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: dataArr,
          type: 'line',
          smooth: true
        }]
      };

      this.trendChart.setOption(option);
    },
    /** 更新饼图 */
    updatePieChart() {
      if (!this.pieChart) return;

      // 按操作人分组数据
      const userMap = {};
      this.allData.forEach(item => {
        const user = item.createBy || '未知';
        if (!userMap[user]) {
          userMap[user] = 0;
        }
        userMap[user]++;
      });

      // 转换为数组并按操作次数从大到小排序
      const data = Object.entries(userMap)
        .sort((a, b) => b[1] - a[1])
        .map(([user, value]) => ({
          name: user,
          value: value
        }));

      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          data: data,
          radius: '50%'
        }]
      };

      this.pieChart.setOption(option);
    },
    /** 更新柱状图 */
    updateBarChart() {
      if (!this.barChart) return;

      // 按操作人分组数据
      const userMap = {};
      this.allData.forEach(item => {
        const user = item.createBy || '未知';
        if (!userMap[user]) {
          userMap[user] = 0;
        }
        userMap[user]++;
      });

      // 转换为数组并按操作次数从大到小排序
      const sortedEntries = Object.entries(userMap).sort((a, b) => b[1] - a[1]);
      const users = sortedEntries.map(([user]) => user);
      const counts = sortedEntries.map(([, count]) => count);

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: users
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: counts,
          type: 'bar'
        }]
      };

      this.barChart.setOption(option);
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.logId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const logIds = row.logId || this.ids;
      this.$modal.confirm('是否确认删除钢卷库区操作记录编号为"' + logIds + '"的数据项？').then(() => {
        this.loading = true;
        return delCoilWarehouseOperationLog(logIds);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wms/coilWarehouseOperationLog/export', {
        ...this.queryParams
      }, `coilWarehouseOperationLog_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style scoped>
.stat-card {
  display: flex;
  align-items: center;
  padding: 5px 0;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
  color: #fff;
}

.stat-icon-primary {
  background-color: #409eff;
}

.stat-icon-success {
  background-color: #67c23a;
}

.stat-icon-warning {
  background-color: #e6a23c;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 12px;
  color: #606266;
  margin-bottom: 3px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}
</style>