工时统计(工艺)

src/views/ManufacturingCenter/ManHourStatistics/Export2Excel.js

@@ -0,0 +1,224 @@
+/* eslint-disable */
+require('script-loader!file-saver');
+// import XLSX from 'xlsx'
+import XLSX from 'xlsx-style'
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
+          }
+        });
+      };
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+};
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C]
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
+}
+
+export function export_json_to_excel({
+  headerGroup,
+  dataGroup,
+  sheetGroup,
+  filename,
+  autoWidth = true,
+  bookType=  'xlsx'
+} = {}) {
+  var wb = new Workbook()
+  for (let i = 0; i < dataGroup.length; i++) {
+    /* original data */
+    let data = dataGroup[i]
+    filename = filename || 'excel-list'
+    data = [...data]
+    data.unshift(headerGroup[i]);
+    var ws_name = sheetGroup[i];
+    var ws = sheet_from_array_of_arrays(data);
+
+    if (autoWidth) {
+      /*设置worksheet每列的最大宽度*/
+      const colWidth = data.map(row => row.map(val => {
+        /*先判断是否为null/undefined*/
+        if (val == null) {
+          return {
+            'wch': 10
+          };
+        }
+        /*再判断是否为中文*/
+        else if (val.toString().charCodeAt(0) > 255) {
+          return {
+            'wch': val.toString().length * 2
+          };
+        } else {
+          return {
+            'wch': val.toString().length
+          };
+        }
+      }))
+      /*以第一行为初始值*/
+      let result = colWidth[0];
+      for (let i = 1; i < colWidth.length; i++) {
+        for (let j = 0; j < colWidth[i].length; j++) {
+          if (result[j]['wch'] < colWidth[i][j]['wch']) {
+            result[j]['wch'] = colWidth[i][j]['wch'];
+          }
+        }
+      }
+      ws['!cols'] = result;
+    }
+    let R = 0;
+    data.map(item => {
+      let C = 0;
+      item.map(itm => {
+        var cell_ref = XLSX.utils.encode_cell({c:C,r:R});
+        var cell = {v: itm }
+        cell.s= {
+          alignment: {
+            horizontal: "center"
+          }
+        }
+        ws[cell_ref] = cell;
+        C++;
+      })
+      R++;
+    })
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+  }
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: 'binary'
+  });
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), `${filename}.${bookType}`);
+}

src/views/ManufacturingCenter/ManHourStatistics/index.vue

@@ -17,9 +17,12 @@
         type="date"
         placeholder="选择结束日期"/>
       <el-button type="success" class="el-icon-search" size="small" style="margin:0px 10px" @click="searchTable();">查询</el-button>
+      <el-tooltip :open-delay="1000" content="导出人员工时统计表" placement="right">
+        <el-button type="primary" size="small" icon="el-icon-download" style="margin:0px 10px" @click="exportTable()">导出</el-button>
+      </el-tooltip>
     </el-card>
     <el-card>
-      <el-table v-loading="loading" :data="tableData" height="380" size="mini" stripe style="width: 100%;" border element-loading-text="拼命加载中">
+      <el-table v-loading="loading" :data="tableData" height="700" size="mini" stripe style="width: 800px" border element-loading-text="拼命加载中">
         <el-table-column label="操作者" align="center" width="110px">
           <template slot-scope="scope">
             {{ scope.row.姓名 }}
@@ -37,98 +40,100 @@
         </el-table-column>
         <el-table-column label="比例" align="center">
           <template slot-scope="scope">
-            {{ scope.row.理论加工时间段===0 ? 0 : Math.round(scope.row.实际加工时间段 / scope.row.理论加工时间段 * 100) / 100.00 }}
+            {{ scope.row.比例 }}
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-    <el-card>
-      <el-date-picker
-        v-model="startTime2"
-        value-format="yyyy-MM-dd"
-        size="small"
-        style="width: 170px;margin:0px 10px"
-        type="date"
-        placeholder="选择开始日期"/>
-      <span class="demonstration">~</span>
-      <el-date-picker
-        v-model="endTime2"
-        value-format="yyyy-MM-dd"
-        size="small"
-        style="width: 170px;margin:0px 10px"
-        type="date"
-        placeholder="选择结束日期"/>
-      <el-button type="success" class="el-icon-search" size="small" style="margin:0px 10px" @click="searchTable2();">查询</el-button>
-    </el-card>
-    <el-card>
-      <el-table v-loading="loading2" :data="tableData2" height="380" size="mini" stripe style="width: 100%;" border element-loading-text="拼命加载中">
-        <el-table-column label="姓名" align="center" width="110px">
-          <template slot-scope="scope">
-            {{ scope.row.姓名 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="零件图号" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.零件图号 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="零件名称" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.零件名称 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="序号" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.工序顺序 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="工序名" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.工艺名称 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="准备工时" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.准结定额工时 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="定额工时" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.单件定额工时 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="序间质检" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.理论加工时间段 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="不合格数" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.理论加工时间段 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="日期" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.理论加工时间段 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="计划准备" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.理论加工时间段 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="计划工时" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.理论加工时间段 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="工时调整说明" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.实际加工时间段 }}
           </template>
         </el-table-column>
       </el-table>
     </el-card>
+    <div v-show="false">
+      <el-card>
+        <el-date-picker
+          v-model="startTime2"
+          value-format="yyyy-MM-dd"
+          size="small"
+          style="width: 170px;margin:0px 10px"
+          type="date"
+          placeholder="选择开始日期"/>
+        <span class="demonstration">~</span>
+        <el-date-picker
+          v-model="endTime2"
+          value-format="yyyy-MM-dd"
+          size="small"
+          style="width: 170px;margin:0px 10px"
+          type="date"
+          placeholder="选择结束日期"/>
+        <el-button type="success" class="el-icon-search" size="small" style="margin:0px 10px" @click="searchTable2();">查询</el-button>
+      </el-card>
+      <el-card>
+        <el-table v-loading="loading2" :data="tableData2" height="380" size="mini" stripe style="width: 100%;" border element-loading-text="拼命加载中">
+          <el-table-column label="姓名" align="center" width="110px">
+            <template slot-scope="scope">
+              {{ scope.row.姓名 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="零件图号" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.零件图号 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="零件名称" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.零件名称 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="序号" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.工序顺序 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="工序名" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.工艺名称 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="准备工时" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.准结定额工时 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="定额工时" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.单件定额工时 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="序间质检" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.理论加工时间段 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="不合格数" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.理论加工时间段 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="日期" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.理论加工时间段 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="计划准备" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.理论加工时间段 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="计划工时" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.理论加工时间段 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="工时调整说明" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.实际加工时间段 }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
   </div>
 </template>
 <script>
@@ -142,14 +147,10 @@ export default {
       endTime: '',
       loading: false,
       tableData: [], // 表格数据
-      total: null, // 总条数
       startTime2: '',
       endTime2: '',
       loading2: false,
-      tableData2: [], // 表格数据
+      tableData2: [] // 表格数据
-      total2: null, // 总条数
-      pageSize: 100000, // 每页显示条数
-      pageCurrent: 1 // 后台获取页
     }
   },
   created() {
@@ -173,10 +174,32 @@ export default {
         this.workerName_ckeck = 0
       }
       searchtable(this.workerName_ckeck, this.workerName, this.timeCheck, this.startTime, this.endTime).then(response => {
+        response.data.map(v => {
+          this.$set(v, '比例', v.理论加工时间段 === 0 ? 0 : Math.round(v.实际加工时间段 / v.理论加工时间段 * 100) / 100.00)
+        })
         this.tableData = response.data
         this.loading = false
       })
     },
+    // 导出
+    exportTable() {
+      import('./Export2Excel').then(excel => {
+        const filterVal1 = ['姓名', '理论加工时间段', '实际加工时间段', '比例']
+        const data1 = this.tableData.map(v => filterVal1.map(j => v[j]))
+        const dataGroup = []
+        dataGroup.push(data1)
+        const headerGroup = [['操作者', '计划工时', '加工工时', '比例']]
+        const sheetGroup = ['工时统计表']
+        excel.export_json_to_excel({
+          headerGroup: headerGroup,
+          dataGroup: dataGroup,
+          sheetGroup: sheetGroup,
+          filename: '工时统计表',
+          autoWidth: true,
+          bookType: 'xlsx'
+        })
+      })
+    },
     searchTable2() {
       this.loading2 = true
       this.tableData2 = []
@@ -199,16 +222,6 @@ export default {
         this.tableData2 = response.data
         this.loading2 = false
       })
-    },
-    // 分页
-    handleSizeChange(val) {
-      this.pageCurrent = 1
-      this.pageSize = val
-      this.searchTable()
-    },
-    handleCurrentChange(val) {
-      this.pageCurrent = val
-      this.searchTable()
     }
   }
 }