<template>
  <div style="width: 30vw; height: 50vh">
    <el-input v-model="input" />
    <el-button
      @click="handlePrint"
    >打印测试
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'Gdcjstj',
}
// 2工单超节损统计(按工序)
import service from '@/utils/request'
const getOrderSuperLossCount = (params) => {
  return service({
    url: '/mes_server/order_super_loss/getOrderSuperLossCount',
    method: 'get',
    params
  })
}

</script>

<script setup>
import { watch, ref, reactive, defineProps, defineEmits } from 'vue'

import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'

const jsonData = {
  'panels': [{
    'index': 0,
    'name': 1,
    'paperType': 'A4',
    'height': 210,
    'width': 297,
    'paperHeader': 108,
    'paperFooter': 551.5151515151515,
    'printElements': [{
      'options': {
        'left': 267.5,
        'top': 17.5,
        'height': 22,
        'width': 294,
        'title': '工单工序各班组超节损统计表',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textAlign': 'center',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'right': 560.5625381469727,
        'bottom': 39.8125,
        'vCenter': 413.56253814697266,
        'hCenter': 28.8125,
        'fontWeight': 600,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 157.5,
        'top': 50,
        'height': 14,
        'width': 129,
        'title': '成品代号',
        'field': 'cpdh',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'gdbh_1',
        'right': 285.562557220459,
        'bottom': 63.99998092651367,
        'vCenter': 221.06255722045898,
        'hCenter': 56.99998092651367,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 17.5,
        'top': 50,
        'height': 14,
        'width': 129,
        'title': '工单编号',
        'field': 'gdbh',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 305,
        'top': 50,
        'height': 14,
        'width': 507,
        'title': '成品名称',
        'field': 'cpmc',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'cpdh_1',
        'right': 442.125057220459,
        'bottom': 63.99998092651367,
        'vCenter': 377.625057220459,
        'hCenter': 56.99998092651367,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 15,
        'top': 67.5,
        'height': 42,
        'width': 811.5,
        'right': 824,
        'bottom': 106.16669209798177,
        'vCenter': 418.25,
        'hCenter': 85.16669209798177,
        'coordinateSync': false,
        'widthHeightSync': false,
      }, 'printElementType': { 'title': '矩形', 'type': 'rect' },
    }, {
      'options': {
        'left': 207.5,
        'top': 70,
        'height': 14,
        'width': 150,
        'title': '订单数量',
        'field': 'ddsl',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'xsddh_1',
        'right': 365.8750190734863,
        'bottom': 88.68750476837158,
        'vCenter': 286.3750190734863,
        'hCenter': 81.68750476837158,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 357.5,
        'top': 70,
        'height': 14,
        'width': 160,
        'title': '实际投料',
        'field': 'sjtl',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'ddsl_1',
        'right': 493.3333079020182,
        'bottom': 88.16669209798177,
        'vCenter': 425.8333079020182,
        'hCenter': 81.16669209798177,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 520,
        'top': 70,
        'height': 14,
        'width': 135,
        'title': '入仓日期',
        'field': 'rcrq',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'sstl_1',
        'right': 654.1666412353516,
        'bottom': 89.0000254313151,
        'vCenter': 586.6666412353516,
        'hCenter': 82.0000254313151,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 22.5,
        'top': 70,
        'height': 14,
        'width': 172.5,
        'title': '销售订单号',
        'field': 'xsddh',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'gdbh_1',
        'right': 195.0000254313151,
        'bottom': 89.0000254313151,
        'vCenter': 108.75002543131511,
        'hCenter': 82.0000254313151,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 657.5,
        'top': 70,
        'height': 14,
        'width': 135,
        'title': '入仓合计',
        'field': 'rchj',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'rcrq_1',
        'right': 797.4999745686848,
        'bottom': 87.33335876464844,
        'vCenter': 729.9999745686848,
        'hCenter': 80.33335876464844,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 15,
        'top': 87.5,
        'height': 9,
        'width': 810,
        'right': 106.66666666666667,
        'bottom': 95.66669209798178,
        'vCenter': 61.66666666666667,
        'hCenter': 91.16669209798178,
        'coordinateSync': false,
        'widthHeightSync': false,
        'borderWidth': 0.75,
      }, 'printElementType': { 'title': '横线', 'type': 'hline' },
    }, {
      'options': {
        'left': 300,
        'top': 90,
        'height': 14,
        'width': 100,
        'title': '制程废',
        'field': 'zcf',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'ltcl_1',
        'right': 439.5454476096413,
        'bottom': 101.5000069358132,
        'vCenter': 387.0454476096413,
        'hCenter': 94.5000069358132,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 400,
        'top': 90,
        'height': 14,
        'width': 100,
        'title': '质检废',
        'field': 'zjf',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'zcf_1',
        'right': 504.5454614812677,
        'bottom': 98.54545454545455,
        'vCenter': 454.5454614812677,
        'hCenter': 91.54545454545455,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 202.5,
        'top': 90,
        'height': 14,
        'width': 100,
        'title': '零头处理',
        'field': 'ltcl',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'wff_1',
        'right': 341.81818875399495,
        'bottom': 101.5000069358132,
        'vCenter': 289.31818875399495,
        'hCenter': 94.5000069358132,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 500,
        'top': 90,
        'height': 14,
        'width': 100,
        'title': '无形损',
        'field': 'wxs',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'zjf_1',
        'right': 602.500021457672,
        'bottom': 100.87499999999999,
        'vCenter': 552.500021457672,
        'hCenter': 93.87499999999999,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 117.5,
        'top': 90,
        'height': 14,
        'width': 90,
        'title': '外发废',
        'field': 'wff',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'clf_1',
        'right': 224.99999306418678,
        'bottom': 100.81818875399503,
        'vCenter': 177.49999306418678,
        'hCenter': 93.81818875399503,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 597.5,
        'top': 90,
        'height': 14,
        'width': 114,
        'title': '目标合格率',
        'field': 'mbhgl',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'wxs_1',
        'right': 728.375021457672,
        'bottom': 102.12499999999997,
        'vCenter': 671.375021457672,
        'hCenter': 95.12499999999997,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 22.5,
        'top': 90,
        'height': 14,
        'width': 95,
        'title': '材料废',
        'field': 'clf',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'xsddh_1',
        'right': 150.25001907348633,
        'bottom': 85.25001430511475,
        'vCenter': 85.75001907348633,
        'hCenter': 78.25001430511475,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 712.5,
        'top': 90,
        'height': 14,
        'width': 114,
        'title': '实际合格率',
        'field': 'sjhgl',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'color': '#000000',
        'textContentVerticalAlign': 'middle',
        'textContentWrap': 'ellipsis',
        'qrCodeLevel': 0,
        'qid': 'mbhgl_1',
        'right': 820.875021457672,
        'bottom': 128.37499999999994,
        'vCenter': 763.875021457672,
        'hCenter': 121.37499999999996,
      }, 'printElementType': { 'title': '这是更新后的元素', 'type': 'text' },
    }, {
      'options': {
        'left': 15,
        'top': 108.5,
        'height': 442.5,
        'width': 811.5,
        'right': 813.6666666666666,
        'bottom': 153.5000254313151,
        'vCenter': 413.9166666666667,
        'hCenter': 135.5000254313151,
        'field': 'table',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 10.5,
        'tableHeaderRowHeight': 30,
        'tableFooterRepeat': 'last',
        'tableHeaderRepeat': 'page',
        'columns': [[{
          'width': 109.58270193697071,
          'title': '印件及工序名称\n',
          'titleSync': false,
          'field': 'gxmc',
          'checked': true,
          'columnId': 'gxmc',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': true,
          'tableSummaryText': '合计',
          'tableSummary': '',
          'tableSummaryAlign': 'right',
        }, {
          'width': 53.99363831254071,
          'title': '工序计划产量',
          'titleSync': false,
          'field': 'jhcl',
          'checked': true,
          'columnId': 'jhcl',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': true,
          'tableSummary': '',
        }, {
          'width': 53.99363831254071,
          'title': '工序计划损耗',
          'titleSync': false,
          'field': 'jhsh',
          'checked': true,
          'columnId': 'jhsh',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': false,
          'tableSummaryColspan': '0',
          'tableSummary': 'sum',
          'tableSummaryAlign': 'right',
          'tableSummaryNumFormat': '0',
        }, {
          'width': 53.99363831254071,
          'title': '制程废',
          'titleSync': false,
          'field': 'zcf',
          'checked': true,
          'columnId': 'zcf',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': false,
          'tableSummary': 'sum',
          'tableSummaryAlign': 'right',
          'tableSummaryNumFormat': '0',
        }, {
          'width': 53.99363831254071,
          'title': '质检废',
          'titleSync': false,
          'field': 'zjf',
          'checked': true,
          'columnId': 'zjf',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': false,
          'tableSummary': 'sum',
          'tableSummaryAlign': 'right',
          'tableSummaryNumFormat': '0',
        }, {
          'width': 53.99363831254071,
          'title': '无形损',
          'titleSync': false,
          'field': 'wxs',
          'checked': true,
          'columnId': 'wxs',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': false,
          'tableSummary': 'sum',
          'tableSummaryAlign': 'right',
          'tableSummaryNumFormat': '0',
        }, {
          'width': 53.99363831254071,
          'title': '报废合计',
          'titleSync': false,
          'field': 'bfhj',
          'checked': true,
          'columnId': 'bfhj',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': false,
          'tableSummary': 'sum',
          'tableSummaryAlign': 'right',
          'tableSummaryNumFormat': '0',
        }, {
          'width': 53.99363831254071,
          'title': '工序节损数',
          'titleSync': false,
          'field': 'jss',
          'checked': true,
          'columnId': 'jss',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': false,
          'tableSummary': 'sum',
          'tableSummaryAlign': 'right',
          'tableSummaryNumFormat': '0',
        }, {
          'width': 53.99363831254071,
          'title': '占投料报废率',
          'titleSync': false,
          'field': 'tlbfl',
          'checked': true,
          'columnId': 'tlbfl',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': true,
          'tableSummary': '',
        }, {
          'width': 53.99363831254071,
          'title': '工序目标报废率',
          'titleSync': false,
          'field': 'mbbfl',
          'checked': true,
          'columnId': 'mbbfl',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': true,
          'tableSummary': '',
        }, {
          'width': 53.99363831254071,
          'title': '工序实际报废率',
          'titleSync': false,
          'field': 'sjbfl',
          'checked': true,
          'columnId': 'sjbfl',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': true,
          'tableSummary': '',
        }, {
          'width': 53.99363831254071,
          'title': '超节损承担比例',
          'titleSync': false,
          'field': 'cdbl',
          'checked': true,
          'columnId': 'cdbl',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': true,
          'tableSummary': '',
        }, {
          'width': 53.99363831254071,
          'title': '工序超节损金额',
          'titleSync': false,
          'field': 'cjsje',
          'checked': true,
          'columnId': 'cjsje',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': false,
          'tableSummary': 'sum',
          'tableSummaryAlign': 'right',
          'tableSummaryNumFormat': '1',
        }, {
          'width': 53.99363831254071,
          'title': '主管确认',
          'titleSync': false,
          'field': 'zgqr',
          'checked': true,
          'columnId': 'zgqr',
          'fixed': false,
          'rowspan': 1,
          'colspan': 1,
          'align': 'right',
          'halign': 'center',
          'tableQRCodeLevel': 0,
          'tableSummaryTitle': true,
          'tableSummary': '',
        }]],
      },
      'printElementType': {
        'title': '空白表格',
        'type': 'table',
        'editable': true,
        'columnDisplayEditable': true,
        'columnDisplayIndexEditable': true,
        'columnTitleEditable': true,
        'columnResizable': true,
        'columnAlignEditable': true,
        'isEnableEditField': true,
        'isEnableContextMenu': true,
        'isEnableInsertRow': true,
        'isEnableDeleteRow': true,
        'isEnableInsertColumn': true,
        'isEnableDeleteColumn': true,
        'isEnableMergeCell': true,
      },
    }, {
      'options': {
        'left': 301.5,
        'top': 562.5,
        'height': 19.5,
        'width': 120,
        'title': '复核：',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'qrCodeLevel': 0,
        'right': 292.5,
        'bottom': 583.5000171661377,
        'vCenter': 232.5,
        'hCenter': 573.7500171661377,
      }, 'printElementType': { 'title': '文本', 'type': 'text' },
    }, {
      'options': {
        'left': 18,
        'top': 562.5,
        'height': 19.5,
        'width': 120,
        'title': '会签：',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'qrCodeLevel': 0,
        'right': 132,
        'bottom': 582.0000171661377,
        'vCenter': 72,
        'hCenter': 572.2500171661377,
      }, 'printElementType': { 'title': '文本', 'type': 'text' },
    }, {
      'options': {
        'left': 643.5,
        'top': 564,
        'height': 19.5,
        'width': 120,
        'title': '审批：',
        'coordinateSync': false,
        'widthHeightSync': false,
        'fontSize': 12,
        'qrCodeLevel': 0,
        'right': 190.5,
        'bottom': 504.0000171661377,
        'vCenter': 130.5,
        'hCenter': 494.2500171661377,
      }, 'printElementType': { 'title': '文本', 'type': 'text' },
    }],
    'paperNumberLeft': 816,
    'paperNumberTop': 555,
    'paperNumberContinue': true,
    'backgroundColor': '#ffffff',
    'orient': 2,
    'overPrintOptions': { 'content': '', 'opacity': 0.7, 'type': 1 },
    'watermarkOptions': {
      'content': '',
      'rotate': 25,
      'timestamp': true,
      'format': 'YYYY-MM-DD HH:mm',
      'fillStyle': 'rgba(184, 184, 184, 0.3)',
      'fontSize': '14px',
      'width': 200,
      'height': 200,
    },
  }],
}
const props = defineProps(['gdbh'])
const input = ref(props?.['gdbh'])

// 引入后使用示例
hiprint.init()
// 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
// 想要实现拖拽设计页面,请往下看 '自定义设计'
const hiprintTemplate = new hiprint.PrintTemplate({ template: jsonData })

const handlePrint = async() => {
  const params = {
    order: input.value,
    type: '1',
  }
  const res = await getOrderSuperLossCount(params)
  if (res['code'] === 0) {
    console.log(res['data'])
    const { data } = res
    const tableData = {
      'gdbh': data['Gd_gdbh'],
      'cpdh': data['成品代号'],
      'cpmc': data['成品名称'],
      'xsddh': data['销售订单号'],
      'ddsl': data['订单数量'],
      'sjtl': data['实际投料'],
      'rcrq': data['warehousing_date'],
      'rchj': data['warehousing_num'],
      'clf': data['material_waste'],
      'wff': data['waste_out'],
      'ltcl': data['minor_processing'],
      'zcf': data['zcfp'],
      'zjf': data['waste_quality'],
      'wxs': data['intangible_loss'],
      'mbhgl': data['target_rate'],
      'sjhgl': data['real_rate'],
      'table': data['gy_data'].map(item => ({
        'gxmc': `${item.Gy0_yjno}-${item.Gy0_gxh}-${item.Gy0_gxmc}-${item.Add_gxmc}`,
        'jhcl': item['Gy0_计划接货数'],
        'jhsh': item['Gy0_计划损耗'],
        'zcf': item['total_fp'],
        'zjf': item['waste_quality'],
        'wxs': item['intangible_loss'],
        'bfhj': item['total_waste'],
        'jss': item['loss'],
        'tlbfl': item['loss_rate'],
        'mbbfl': item['target_loss_rate'],
        'sjbfl': item['actual_loss_rate'],
        'cdbl': item['超节损承担比例'],
        'cjsje': item[''],
        'zgqr': item[''],
      })),
    }
    hiprintTemplate.print(tableData)
  }
}
</script>

<style scoped>

</style>
