自动化立体仓库 - WCS系统
*
lsh
2025-04-09 62a19bf40e747ab986645728d65a63b927eddb6e
src/main/webapp/views/taskWrkLog/taskWrkLog.html
@@ -1,193 +1,358 @@
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>任务管理</title>
      <link rel="stylesheet" href="../../static/wcs/css/element.css">
      <script type="text/javascript" src="../../static/wcs/js/jquery/jquery-3.3.1.min.js"></script>
      <script type="text/javascript" src="../../static/wms/layui/layui.js"></script>
      <script type="text/javascript" src="../../static/wcs/js/common.js"></script>
      <script type="text/javascript" src="../../static/wcs/js/vue.min.js"></script>
      <script type="text/javascript" src="../../static/wcs/js/element.js"></script>
   </head>
<head>
   <meta charset="UTF-8">
   <title>任务管理</title>
   <link rel="stylesheet" href="../../static/wcs/css/element.css">
   <script type="text/javascript" src="../../static/wcs/js/jquery/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="../../static/wms/layui/layui.js"></script>
   <script type="text/javascript" src="../../static/wcs/js/common.js"></script>
   <script type="text/javascript" src="../../static/wcs/js/vue.min.js"></script>
   <script type="text/javascript" src="../../static/wcs/js/element.js"></script>
   <script type="text/javascript" src="../../static/wcs/js/xlsx.full.min.js"></script>
   <script type="text/javascript" src="../../static/wcs/js/FileSaver.min.js"></script>
</head>
   <body>
      <div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;">
         <div style="width: 100%;">
            <el-card class="box-card">
               <el-form :inline="true" :model="tableSearchParam" class="demo-form-inline">
                  <el-form-item label="">
                     <el-input v-model="tableSearchParam.task_no" placeholder="任务号"></el-input>
                  </el-form-item>
                  <el-form-item label="">
                     <el-input v-model="tableSearchParam.wrk_no" placeholder="工作号"></el-input>
                  </el-form-item>
                  <el-form-item>
                     <el-button type="primary" @click="getTableData">查询</el-button>
                     <el-button type="primary" @click="resetParam">重置</el-button>
                  </el-form-item>
               </el-form>
               <el-table ref="singleTable" :data="tableData" style="width: 100%;">
                  <el-table-column label="操作" width="100">
                     <template slot-scope="scope">
                        <el-dropdown @command="(command)=>{handleCommand(command, scope.row)}">
                           <el-button icon="el-icon-more" size="mini" type="primary"></el-button>
                           <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item command="showCommand">查看指令</el-dropdown-item>
                           </el-dropdown-menu>
                        </el-dropdown>
                     </template>
                  </el-table-column>
                  <el-table-column property="taskNo" label="任务号">
                  </el-table-column>
                  <el-table-column property="status$" label="任务状态">
                  </el-table-column>
                  <el-table-column property="wrkNo" label="工作号">
                  </el-table-column>
                  <el-table-column property="createTime$" label="生成时间">
                  </el-table-column>
                  <el-table-column property="modiTime$" label="更新时间">
                  </el-table-column>
                  <el-table-column property="assignTime$" label="派发时间">
                  </el-table-column>
                  <el-table-column property="executeTime$" label="执行时间">
                  </el-table-column>
                  <el-table-column property="completeTime$" label="完结时间">
                  </el-table-column>
                  <el-table-column property="cancelTime$" label="取消时间">
                  </el-table-column>
                  <el-table-column property="durationTime" label="持续时长">
                  </el-table-column>
                  <el-table-column property="ioType$" label="任务类型">
                  </el-table-column>
                  <el-table-column property="startPoint" label="起点位置">
                  </el-table-column>
                  <el-table-column property="targetPoint" label="终点位置">
                  </el-table-column>
                  <el-table-column property="wrkSts$" label="工作状态">
                  </el-table-column>
                  <el-table-column property="crnNo" label="堆垛机号">
                  </el-table-column>
                  <el-table-column property="barcode" label="条码">
                  </el-table-column>
               </el-table>
<body>
<div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;">
   <div style="width: 100%;">
      <el-card class="box-card">
         <el-form :inline="true" :model="tableSearchParam" class="demo-form-inline">
            <el-form-item label="">
               <el-input v-model="tableSearchParam.task_no" placeholder="任务号"></el-input>
            </el-form-item>
            <el-form-item label="">
               <el-input v-model="tableSearchParam.wrk_no" placeholder="工作号"></el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="getTableData">查询</el-button>
               <el-button type="primary" @click="resetParam">重置</el-button>
               <el-button type="primary" @click="exportTable">导出当前页面数据</el-button>
               <el-button type="primary" @click="exportTableAll">导出所有(点击后等待2分钟以上,不要重复点击)</el-button>
            </el-form-item>
         </el-form>
         <el-table ref="singleTable" :data="tableData" style="width: 100%;">
            <el-table-column label="操作" width="100">
               <template slot-scope="scope">
                  <el-dropdown @command="(command)=>{handleCommand(command, scope.row)}">
                     <el-button icon="el-icon-more" size="mini" type="primary"></el-button>
                     <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="showCommand">查看指令</el-dropdown-item>
                     </el-dropdown-menu>
                  </el-dropdown>
               </template>
            </el-table-column>
            <el-table-column property="taskNo" label="任务号">
            </el-table-column>
            <el-table-column property="status$" label="任务状态">
            </el-table-column>
            <el-table-column property="wrkNo" label="工作号">
            </el-table-column>
            <el-table-column property="createTime$" label="生成时间">
            </el-table-column>
            <el-table-column property="modiTime$" label="更新时间">
            </el-table-column>
            <el-table-column property="assignTime$" label="派发时间">
            </el-table-column>
            <el-table-column property="executeTime$" label="执行时间">
            </el-table-column>
            <el-table-column property="completeTime$" label="完结时间">
            </el-table-column>
            <el-table-column property="cancelTime$" label="取消时间">
            </el-table-column>
            <el-table-column property="durationTime" label="持续时长">
            </el-table-column>
            <el-table-column property="ioType$" label="任务类型">
            </el-table-column>
            <el-table-column property="startPoint" label="起点位置">
            </el-table-column>
            <el-table-column property="targetPoint" label="终点位置">
            </el-table-column>
            <el-table-column property="wrkSts$" label="工作状态">
            </el-table-column>
            <el-table-column property="crnNo" label="堆垛机号">
            </el-table-column>
            <el-table-column property="barcode" label="条码">
            </el-table-column>
            <el-table-column property="memo" label="备注">
            </el-table-column>
         </el-table>
               <div style="margin-top: 10px;">
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                  </el-pagination>
               </div>
            </el-card>
         <div style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
            </el-pagination>
         </div>
      </div>
      <script>
         var $layui = layui.config({
            base: baseUrl + "/static/wms/layui/lay/modules/"
         }).use(['layer', 'form'], function() {})
      </el-card>
   </div>
</div>
<script>
   var $layui = layui.config({
      base: baseUrl + "/static/wms/layui/lay/modules/"
   }).use(['layer', 'form'], function() {})
         var app = new Vue({
            el: '#app',
            data: {
               tableData: [],
               currentPage: 1,
               pageSizes: [16, 30, 50, 100, 150, 200],
               pageSize: 16,
               pageTotal: 0,
               tableSearchParam: {
                  task_no: null,
                  status: null,
                  wrk_no: null
               }
            },
            created() {
               this.init()
            },
            methods: {
               init() {
                  let taskNo = getQueryVariable('taskNo')
                  let wrkNo = getQueryVariable('wrkNo')
                  if (taskNo != false) {
                     this.tableSearchParam.task_no = taskNo
                  }
                  if (wrkNo != false) {
                     this.tableSearchParam.wrk_no = wrkNo
                  }
                  this.getTableData()
               },
               getTableData() {
                  let that = this;
                  let data = this.tableSearchParam
                  data.curr = this.currentPage
                  data.limit = this.pageSize
                  $.ajax({
                     url: baseUrl + "/taskWrkLog/list/auth",
                     headers: {
                        'token': localStorage.getItem('token')
                     },
                     data: data,
                     dataType: 'json',
                     contentType: 'application/json;charset=UTF-8',
                     method: 'GET',
                     success: function(res) {
                        if (res.code == 200) {
                           that.tableData = res.data.records
                           that.pageTotal = res.data.total
                        } else if (res.code === 403) {
                           top.location.href = baseUrl + "/";
                        } else {
                           that.$message({
                              message: res.msg,
                              type: 'error'
                           });
                        }
                     }
                  });
               },
               handleSizeChange(val) {
                  console.log(`每页 ${val} 条`);
                  this.pageSize = val
                  this.getTableData()
               },
               handleCurrentChange(val) {
                  console.log(`当前页: ${val}`);
                  this.currentPage = val
                  this.getTableData()
               },
               resetParam() {
                  this.tableSearchParam = {
                     task_no: null,
                     status: null,
                     wrk_no: null
                  }
                  this.getTableData()
               },
               handleCommand(command, row) {
                  switch (command) {
                     case "showCommand":
                        //查看指令
                        this.showCommand(row)
                        break;
                  }
               },
               showCommand(row) {
                  let wrkNo = row.wrkNo == null ? "" : row.wrkNo
                  //查看指令
                  $layui.layer.open({
                     type: 2,
                     title: '指令管理',
                     maxmin: true,
                     area: [top.detailWidth, top.detailHeight],
                     shadeClose: true,
                     content: 'commandManageLog.html?taskNo=' + row.taskNo + "&wrkNo=" + wrkNo,
                     success: function(layero, index) {}
                  });
               },
   var app = new Vue({
      el: '#app',
      data: {
         tableData: [],
         tableDataAll: [],
         currentPage: 1,
         pageSizes: [16, 30, 50, 100, 150, 200],
         pageSize: 16,
         pageTotal: 0,
         tableSearchParam: {
            task_no: null,
            status: null,
            wrk_no: null
         }
      },
      created() {
         this.init()
      },
      methods: {
         init() {
            let taskNo = getQueryVariable('taskNo')
            let wrkNo = getQueryVariable('wrkNo')
            if (taskNo != false) {
               this.tableSearchParam.task_no = taskNo
            }
         })
      </script>
   </body>
            if (wrkNo != false) {
               this.tableSearchParam.wrk_no = wrkNo
            }
            this.getTableData()
         },
         getTableData() {
            let that = this;
            let data = this.tableSearchParam
            data.curr = this.currentPage
            data.limit = this.pageSize
            $.ajax({
               url: baseUrl + "/taskWrkLog/list/auth",
               headers: {
                  'token': localStorage.getItem('token')
               },
               data: data,
               dataType: 'json',
               contentType: 'application/json;charset=UTF-8',
               method: 'GET',
               success: function(res) {
                  if (res.code == 200) {
                     that.tableData = res.data.records
                     that.pageTotal = res.data.total
                  } else if (res.code === 403) {
                     top.location.href = baseUrl + "/";
                  } else {
                     that.$message({
                        message: res.msg,
                        type: 'error'
                     });
                  }
               }
            });
         },
         executeExportTable() {
            // 1. 过滤操作列
            const exportData = this.tableData.map(item => {
               const cloned = { ...item }
               delete cloned.operation // 移除操作列关联字段
               return cloned
            })
            // 2. 完整字段映射
            const headerMap = {
               taskNo: '任务号',
               status: 'status',
               wrkNo: '工作号',
               createTime: 'createTime',
               ioType: 'ioType',
               ioPri: '优先级',
               startPoint: '起点位置',
               targetPoint: '终点位置',
               modiUser: 'modiUser',
               modiTime: 'modiTime',
               memo: '备注',
               barcode: '条码',
               assignTime: 'assignTime',
               executeTime: 'executeTime',
               completeTime: 'completeTime',
               cancelTime: 'cancelTime',
               wrkSts: 'wrkSts',
               crnNo: '堆垛机号',
               commandStep: 'step',
               transferMark: 'mark',
               wrkSts$: '工作状态',
               ioType$: '任务类型',
               status$: '任务状态',
               createTime$: '生成时间',
               modiTime$: '更新时间',
               modiUser$: '更新人员',
               completeTime$: '完结时间',
               executeTime$: '执行时间',
               assignTime$: '派发时间',
               cancelTime$: '取消时间'
               // taskNo: '任务号',
               // status$: '任务状态',
               // wrkNo: '工作号',
               // createTime$: '生成时间',
               // modiTime$: '更新时间',
               // assignTime$: '派发时间',
               // executeTime$: '执行时间',
               // completeTime$: '完结时间',
               // cancelTime$: '取消时间',
               // durationTime: '持续时长',
               // ioType$: '任务类型',
               // startPoint: '起点位置',
               // targetPoint: '终点位置',
               // wrkSts$: '工作状态',
               // crnNo: '堆垛机号',
               // barcode: '条码',
               // memo: '备注'
            }
            // 3. 创建工作表
            const worksheet = XLSX.utils.json_to_sheet(exportData)
            // 4. 替换表头为中文
            XLSX.utils.sheet_add_aoa(worksheet, [Object.values(headerMap)], { origin: 'A1' })
            // 5. 生成文件名(带日期)
            const fileName = `任务列表_${new Date().toLocaleDateString().replace(/\//g, '-')}.xlsx`
            // 6. 导出文件
            const workbook = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(workbook, worksheet, '任务数据')
            XLSX.writeFile(workbook, fileName)
         },
         executeExportTableAll() {
            let that = this;
            $.ajax({
               url: baseUrl + "/taskWrkLog/export/all/auth",
               headers: {
                  'token': localStorage.getItem('token')
               },
               dataType: 'json',
               contentType: 'application/json;charset=UTF-8',
               method: 'GET',
               success: function(res) {
                  if (res.code == 200) {
                     that.tableDataAll = res.data.records
                     // 1. 过滤操作列
                     const exportData = that.tableDataAll.map(item => {
                        const cloned = { ...item }
                        delete cloned.operation // 移除操作列关联字段
                        return cloned
                     })
                     // 2. 完整字段映射
                     const headerMap = {
                        taskNo: '任务号',
                        status: '任务状态',
                        wrkNo: '工作号',
                        createTime: 'createTime',
                        ioType: 'ioType',
                        ioPri: '优先级',
                        startPoint: '起点位置',
                        targetPoint: '终点位置',
                        modiUser: 'modiUser',
                        modiTime: 'modiTime',
                        memo: '备注',
                        barcode: '条码',
                        assignTime: 'assignTime',
                        executeTime: 'executeTime',
                        completeTime: 'completeTime',
                        cancelTime: 'cancelTime',
                        wrkSts: 'wrkSts',
                        crnNo: '堆垛机号',
                        commandStep: 'step',
                        transferMark: 'mark',
                        wrkSts$: '工作状态',
                        ioType$: '任务类型',
                        status$: '任务状态',
                        createTime$: '生成时间',
                        modiTime$: '更新时间',
                        modiUser$: '更新人员',
                        completeTime$: '完结时间',
                        executeTime$: '执行时间',
                        assignTime$: '派发时间',
                        cancelTime$: '取消时间'
                     }
                     // 3. 创建工作表
                     const worksheet = XLSX.utils.json_to_sheet(exportData)
                     // 4. 替换表头为中文
                     XLSX.utils.sheet_add_aoa(worksheet, [Object.values(headerMap)], { origin: 'A1' })
                     // 5. 生成文件名(带日期)
                     const fileName = `任务列表_${new Date().toLocaleDateString().replace(/\//g, '-')}.xlsx`
                     // 6. 导出文件
                     const workbook = XLSX.utils.book_new()
                     XLSX.utils.book_append_sheet(workbook, worksheet, '任务数据')
                     XLSX.writeFile(workbook, fileName)
                  } else if (res.code === 403) {
                     top.location.href = baseUrl + "/";
                  } else {
                     that.$message({
                        message: res.msg,
                        type: 'error'
                     });
                  }
               }
            });
         },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getTableData()
         },
         handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getTableData()
         },
         resetParam() {
            this.tableSearchParam = {
               task_no: null,
               status: null,
               wrk_no: null
            }
            this.getTableData()
         },
         exportTable() {
            this.executeExportTable()
         },
         exportTableAll() {
            this.executeExportTableAll()
         },
         handleCommand(command, row) {
            switch (command) {
               case "showCommand":
                  //查看指令
                  this.showCommand(row)
                  break;
            }
         },
         showCommand(row) {
            let wrkNo = row.wrkNo == null ? "" : row.wrkNo
            //查看指令
            $layui.layer.open({
               type: 2,
               title: '指令管理',
               maxmin: true,
               area: [top.detailWidth, top.detailHeight],
               shadeClose: true,
               content: 'commandManageLog.html?taskNo=' + row.taskNo + "&wrkNo=" + wrkNo,
               success: function(layero, index) {}
            });
         },
      }
   })
</script>
</body>
</html>