From b8ff1a5eb9c22879ecd2caa17e084ca23145e3a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= <zhaozhengyi1b@126.com>
Date: Fri, 14 Feb 2025 17:25:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 QualityReport.vue                             |   87 --
 .../qualityManagement/gp12/qcGp12Service.js   |   12 +
 .../workorder/components/DefectCard.vue       |  258 +++++
 .../components/DefectUpdateDialog.vue         |   73 ++
 .../components/EndWorkOrderDialog.vue         |  192 ++++
 .../components/GenerateLabelDialog.vue        |  203 ++++
 .../components/StartWorkOrderDialog.vue       |  184 +++
 .../workorder/components/WorkOrderCard.vue    |  357 ++++++
 .../touchScreen/workorder/index-backup.vue    | 1000 +++++++++++++++++
 .../gp12/touchScreen/workorder/index.vue      |  981 ++--------------
 10 files changed, 2353 insertions(+), 994 deletions(-)
 delete mode 100644 QualityReport.vue
 create mode 100644 src/views/qualityManagement/gp12/touchScreen/workorder/components/DefectCard.vue
 create mode 100644 src/views/qualityManagement/gp12/touchScreen/workorder/components/DefectUpdateDialog.vue
 create mode 100644 src/views/qualityManagement/gp12/touchScreen/workorder/components/EndWorkOrderDialog.vue
 create mode 100644 src/views/qualityManagement/gp12/touchScreen/workorder/components/GenerateLabelDialog.vue
 create mode 100644 src/views/qualityManagement/gp12/touchScreen/workorder/components/StartWorkOrderDialog.vue
 create mode 100644 src/views/qualityManagement/gp12/touchScreen/workorder/components/WorkOrderCard.vue
 create mode 100644 src/views/qualityManagement/gp12/touchScreen/workorder/index-backup.vue

diff --git a/QualityReport.vue b/QualityReport.vue
deleted file mode 100644
index 81395c3..0000000
--- a/QualityReport.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script>
-export default {
-    methods: {
-        /** 提交按钮 */
-        submitForm: function () {
-            this.$refs["form"].validate((valid) => {
-                if (valid) {
-                    console.log(JSON.stringify(this.form));
-
-                    if (this.form.id != undefined && this.opertype === 2) {
-                        updateQcGp12ServiceStatistics(this.form)
-                            .then((res) => {
-                                this.msgSuccess("修改成功");
-                                this.open = false;
-                                this.getList();
-                            })
-                            .catch((err) => {
-                                //TODO 错误逻辑
-                            });
-                    } else {
-                        addQcGp12ServiceStatistics(this.form)
-                            .then((res) => {
-                                this.msgSuccess("新增成功");
-                                this.open = false;
-                                this.getList();
-                            })
-                            .catch((err) => {
-                                //TODO 错误逻辑
-                            });
-                    }
-                }
-            });
-        },
-        /** 新增表单校验规则 */
-        rules: {
-            id: [
-                { required: true, message: "序号不能为空", trigger: "blur" }
-            ],
-            workOrder: [
-                { required: true, message: "工单号不能为空", trigger: "blur" }
-            ],
-            partNumber: [
-                { required: true, message: "零件号不能为空", trigger: "blur" }
-            ],
-            description: [
-                { required: true, message: "零件描述不能为空", trigger: "blur" }
-            ],
-            specification: [
-                { required: true, message: "规格不能为空", trigger: "blur" }
-            ],
-            color: [
-                { required: true, message: "颜色不能为空", trigger: "blur" }
-            ],
-            team: [
-                { required: true, message: "班组不能为空", trigger: "blur" }
-            ],
-            siteNo: [
-                { required: true, message: "站点号不能为空", trigger: "blur" }
-            ],
-            comNo: [
-                { required: true, message: "串口号不能为空", trigger: "blur" }
-            ],
-            startTime: [
-                { required: true, message: "开始时间不能为空", trigger: "change" }
-            ],
-            endTime: [
-                { required: true, message: "结束时间不能为空", trigger: "change" }
-            ],
-            requireNumber: [
-                { required: true, message: "投入数不能为空", trigger: "blur" }
-            ],
-            qualifiedNumber: [
-                { required: true, message: "合格数不能为空", trigger: "blur" }
-            ],
-            qualifiedRate: [
-                { required: true, message: "合格率不能为空", trigger: "blur" }
-            ],
-            damoNumber: [
-                { required: true, message: "打磨数不能为空", trigger: "blur" }
-            ],
-            baofeiNumber: [
-                { required: true, message: "报废数不能为空", trigger: "blur" }
-            ],
-        },
-    },
-};
-</script>
\ No newline at end of file
diff --git a/src/api/qualityManagement/gp12/qcGp12Service.js b/src/api/qualityManagement/gp12/qcGp12Service.js
index 29d32fe..710e4fa 100644
--- a/src/api/qualityManagement/gp12/qcGp12Service.js
+++ b/src/api/qualityManagement/gp12/qcGp12Service.js
@@ -128,3 +128,15 @@ export function UpdateWorkOrderDetail(query) {
     params: query,
   })
 }
+
+/**
+ * 生成虚拟标签
+ * @param {查询条件} data
+ */
+export function GenerateVirtualLabel(query) {
+  return request({
+    url: '/mes/qc/gp12/QcGp12Controller/GenerateVirtualLabel',
+    method: 'post',
+    data: query,
+  })
+}
diff --git a/src/views/qualityManagement/gp12/touchScreen/workorder/components/DefectCard.vue b/src/views/qualityManagement/gp12/touchScreen/workorder/components/DefectCard.vue
new file mode 100644
index 0000000..9e764ac
--- /dev/null
+++ b/src/views/qualityManagement/gp12/touchScreen/workorder/components/DefectCard.vue
@@ -0,0 +1,258 @@
+<template>
+    <el-row :gutter="10">
+        <el-col :span="8" v-for="(group, index) in groups" :key="index">
+            <el-card shadow="hover" class="box-card">
+                <div class="card-header">{{ group.groupName }}</div>
+                <div>
+                    <el-row :gutter="5" v-for="(row, rowIndex) in rowList" :key="rowIndex">
+                        <el-col :span="2">
+                            <div class="defect-item-left">{{ row }}</div>
+                        </el-col>
+                        <el-col v-if="item.type === row" :span="3" v-for="(item, index) in group.children" :key="index">
+                            <div class="defect-item-box" @mousedown="handleStart($event, item)"
+                                @mouseup="handleEnd($event, item)" @touchstart="handleStart($event, item)"
+                                @touchend="handleEnd($event, item)">
+                                <div class="defect-item-name">{{ item.name }}</div>
+                                <div class="defect-item-number">{{ getClickItemNum(item) }}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-card>
+        </el-col>
+        <el-col :span="8">
+            <slot name="workorder"></slot>
+        </el-col>
+        <DefectUpdateDialog ref="DefectUpdateDialogRef" @updateDefectNum="updateDefectNum" />
+    </el-row>
+</template>
+
+<script>
+import DefectUpdateDialog from './DefectUpdateDialog.vue';
+import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
+export default {
+    name: 'DefectCard',
+    components: { DefectUpdateDialog },
+    props: {
+        // 工单信息
+        formData: Object,
+    },
+    data() {
+        return {
+            groups: [
+                { groupName: '油漆', children: [] },
+                { groupName: '设备', children: [] },
+                { groupName: '毛坯', children: [] },
+                { groupName: '程序', children: [] },
+                { groupName: '班组操作', children: [] }
+            ],
+            rowList: ['抛光', '打磨', '报废'],
+            pressTimer: null,
+            isLongPress: false,
+            dialogData: {
+                title: '',
+                update: {
+                    show: false,
+                    updateName: '',
+                    updateCode: '',
+                    updateNum: 0
+                },
+            }
+        };
+    },
+    created() {
+        this.init();
+    },
+    methods: {
+        async init() {
+            let groups = await QcGp12Api.GetDefectInitOptions()
+            this.groups = groups.data
+        },
+        validateWorkOrder() {
+            if (!this.formData.workOrder) {
+                this.showErrorMessage(1, '未生成有效工单!请扫描箱标签');
+                return false;
+            }
+            return true;
+        },
+        showErrorMessage(code, message) {
+            this.$emit('showWarningMessage', code, message);
+        },
+        getClickItemNum(item) {
+            return item.num || 0;
+        },
+        handleStart(event, item) {
+            if (event.type.startsWith('touch')) event.preventDefault();
+            if (this.pressTimer) clearTimeout(this.pressTimer);
+            this.pressTimer = setTimeout(() => {
+                this.isLongPress = true;
+                this.showUpdateDialog(item);
+            }, 500);
+        },
+        handleEnd(event, item = null) {
+            if (!item) return;
+            if (this.pressTimer) clearTimeout(this.pressTimer);
+            this.handleShortClick(item);
+            this.isLongPress = false;
+        },
+        // 提取短按处理逻辑
+        handleShortClick(item) {
+            if (this.isLongPress) return;
+            if (!this.validateWorkOrder()) return;
+            const params = {
+                workOrder: this.formData.workOrder,
+                defectCode: item.code,
+                defectNum: item.num || 0,
+                type: "1",
+            };
+            this.updateDefectItem(params);
+        },
+        updateDefectItem(params) {
+            QcGp12Api.ChangeWorkOrderDefect(params).then(res => {
+                if (res.code === 200) {
+                    this.refresh();
+                } else {
+                    this.$message.error('缺陷项点击异常');
+                }
+            });
+        },
+        // 长按
+        showUpdateDialog(item) {
+            if (!this.validateWorkOrder()) return;
+            const data = {
+                updateName: `${item.type}-${item.name}`,
+                updateCode: item.code,
+                updateNum: this.getClickItemNum(item),
+                workOrder: this.formData.workOrder,
+                description: this.formData.description
+            }
+            this.$refs.DefectUpdateDialogRef.open(data);
+        },
+        updateDefectNum(params) {
+            if (!this.validateWorkOrder()) return;
+            this.updateDefectItem(params);
+            this.$refs.DefectUpdateDialogRef.close();
+            this.refresh();
+            this.isLongPress = false;
+        },
+        setDefectNum(defectCode, num) {
+            // 更新缺陷数量的方法
+            for (let group of this.groups) {
+                for (let child of group.children) {
+                    if (child.code === defectCode) {
+                        child.num = num;
+                        break;
+                    }
+                }
+            }
+        },
+        async refresh() {
+            this.$emit("refresh");
+        },
+        // 获取工单缺陷项(刷新)
+        getDefectListByWorkOrder() {
+            if (!this.formData.workOrder) {
+                return;
+            }
+            const params = {
+                workOrder: this.formData.workOrder,
+            };
+            QcGp12Api.GetWorkOrderDefectList(params).then(res => {
+                if (res.code === 200 && res.data.length > 0) {
+                    let _list = res.data;
+                    for (let item of _list) {
+                        this.setDefectNum(item.defectCode, item.defectNum);
+                    }
+                }
+            })
+        },
+    }
+};
+</script>
+
+<style scoped>
+.box-card {
+    width: 100%;
+    background-color: #032169;
+    /* 深墨绿色背景 */
+    color: #ecf0f1;
+    /* 浅灰色文字颜色 */
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    /* 设置阴影 */
+    margin-top: 2px;
+    margin-bottom: 2px;
+    /* 增加卡片底部间距 */
+}
+
+.card-header {
+    color: #ecf0f1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.defect-item-left {
+    height: 100px;
+    font-size: 16px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-lr;
+}
+
+.defect-item-box {
+    min-width: 100%;
+    border-radius: 5%;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    background-color: #11a983;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    /* 添加过渡效果 */
+}
+
+.defect-item-box:hover {
+    background-color: #008c62;
+    /* 悬停时的背景颜色 */
+    transform: scale(1.05);
+    /* 悬停时稍微放大 */
+    cursor: pointer;
+    /* 改变鼠标指针形状 */
+}
+
+.defect-item-name {
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-lr;
+    letter-spacing: 5px;
+}
+
+.defect-item-number {
+    color: red;
+    width: 100%;
+    height: 40px;
+    font-size: 20px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.number-text {
+    font-size: 20px;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/qualityManagement/gp12/touchScreen/workorder/components/DefectUpdateDialog.vue b/src/views/qualityManagement/gp12/touchScreen/workorder/components/DefectUpdateDialog.vue
new file mode 100644
index 0000000..84d4922
--- /dev/null
+++ b/src/views/qualityManagement/gp12/touchScreen/workorder/components/DefectUpdateDialog.vue
@@ -0,0 +1,73 @@
+<template>
+    <el-dialog class="dialogBox" :visible.sync="show" title="缺陷项修改" width="400px" append-to-body
+        :close-on-click-modal="false">
+        <el-form label-width="auto">
+            <el-form-item label="工单号">
+                <div class="number-text">{{ workOrder }}</div>
+            </el-form-item>
+            <el-form-item label="缺陷项">
+                <div class="number-text">{{ updateName }}</div>
+            </el-form-item>
+            <el-form-item label="缺陷数">
+                <el-input-number :min="0" class="number-text" v-model="updateNum"></el-input-number>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="close">取消</el-button>
+                <el-button :disabled="loading" type="primary" @click="updateDefectNum">确认修改</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
+export default {
+    name: 'DefectUpdateDialog',
+    data() {
+        return {
+            loading: false,
+            show: false,
+            updateName: '',
+            updateCode: '',
+            updateNum: 0,
+            workOrder: '',
+            description: ""
+        }
+    },
+    methods: {
+        updateDefectNum() {
+            this.loading = true;
+            const params = {
+                workOrder: this.workOrder,
+                defectCode: this.updateCode,
+                defectNum: this.updateNum || 0,
+                type: "2",
+            };
+            this.$emit('updateDefectNum', params);
+            this.loading = false;
+        },
+        open(data) {
+            this.show = true;
+            this.loading = false;
+            this.updateName = data.updateName;
+            this.updateCode = data.updateCode;
+            this.updateNum = data.updateNum;
+            this.workOrder = data.workOrder;
+            this.description = data.description;
+        },
+        close() {
+            this.show = false;
+            this.updateName = "";
+            this.updateCode = "";
+            this.updateNum = 0;
+            this.workOrder = "";
+        }
+    }
+};
+</script>
+
+<style scoped>
+/* 样式 */
+</style>
\ No newline at end of file
diff --git a/src/views/qualityManagement/gp12/touchScreen/workorder/components/EndWorkOrderDialog.vue b/src/views/qualityManagement/gp12/touchScreen/workorder/components/EndWorkOrderDialog.vue
new file mode 100644
index 0000000..5673309
--- /dev/null
+++ b/src/views/qualityManagement/gp12/touchScreen/workorder/components/EndWorkOrderDialog.vue
@@ -0,0 +1,192 @@
+<template>
+    <el-dialog v-loading="loading" :visible.sync="show" title="结束工单" width="90%" append-to-body
+        :close-on-click-modal="false">
+        <el-form label-width="auto">
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-form-item label="工单号">
+                        <div class="number-text">{{ formData.workOrder }}</div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="零件号">
+                        <div class="number-text">{{ formData.partNumber }}</div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="规格">
+                        <div class="number-text">{{ formData.specification }}</div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="颜色">
+                        <div class="number-text">{{ formData.color }}</div>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-form-item label="描述">
+                        <div class="number-text">{{ formData.description }}</div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="3">
+                    <el-form-item label="站点">
+                        <div class="number-text">{{ siteNo }}</div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="3">
+                    <el-form-item label="班组">
+                        <div class="number-text">{{ team }}</div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="来源">
+                        <div class="number-text">{{ formData.isOnetime === 1 ? "一次合格" : "抛光件" }}</div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="类别">
+                        <div class="number-text">{{ formData.isBack === 1 ? "返工件" : "正常件" }}</div>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <table class="workorder-card-table">
+                <tr>
+                    <td>投入数</td>
+                    <td>{{ formData.requireNumber }}</td>
+                    <td>合格数</td>
+                    <td>{{ formData.qualifiedNumber }}</td>
+                    <td>合格率</td>
+                    <td>{{ qualifiedRate }}</td>
+                </tr>
+                <tr>
+                    <td>抛光数</td>
+                    <td>{{ formData.polishNumber }}</td>
+                    <td>打磨数</td>
+                    <td>{{ formData.damoNumber }}</td>
+                    <td>报废数</td>
+                    <td>{{ formData.baofeiNumber }}</td>
+                </tr>
+                <tr>
+                    <td>开始时间</td>
+                    <td>{{ formData.startTime }}</td>
+                    <td>结束时间</td>
+                    <td>{{ formData.endTime }}</td>
+                    <td>工单状态</td>
+                    <td>{{ formData.endTime ? "已结束" : "未结束" }}</td>
+                </tr>
+            </table>
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="close">取消</el-button>
+                <el-button :disabled="loading" type="primary" @click="endWorkOrder">确认结束工单并生成报表</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
+export default {
+    name: 'EndWorkOrderDialog',
+    data() {
+        return {
+            loading: false,
+            show: false,
+            formData: {
+                workOrder: '',
+                partnumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                number: '',
+                labelCode: '',
+                siteNo: '',
+                comNo: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+            },
+            // 需要传入
+            team: '',
+            siteNo: '',
+        }
+    },
+    computed: {
+        qualifiedRate() {
+            if (this.formData.requireNumber > 0) {
+                const rate = Math.floor((this.formData.qualifiedNumber / this.formData.requireNumber) * 100);
+                return `${rate}%`;
+            } else {
+                return "0%";
+            }
+        }
+    },
+    methods: {
+        endWorkOrder() {
+            this.$confirm('是否确认完成工单并生成报表!', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'info',
+                center: true
+            }).then(() => {
+                QcGp12Api.EndGP12WorkOrderAndCreateStatistics(this.formData).then(res => {
+                    if (res.code === 200 && res.data === "ok") {
+                        this.$message.success("结束工单并生成报表成功！");
+                        this.changeFormStatus(1)
+                        this.doClearFormData()
+                        this.close()
+                    } else {
+                        this.$message.error("结束工单异常！" + res.msg);
+                    }
+                });
+            }).catch(() => {
+            });
+        },
+        changeFormStatus(type) {
+            // type = 1 进入外标签扫码模式
+            this.$emit("changeFormStatus", type)
+        },
+        doClearFormData() {
+            this.$emit('clearFormData');
+        },
+        open(data) {
+            this.show = true
+            this.loading = false
+            this.formData = data.formData
+            this.team = data.team
+            this.siteNo = data.siteNo
+        },
+        close() {
+            this.show = false
+            this.loading = false
+            this.formData = {}
+            this.team = ""
+            this.siteNo = ""
+        }
+    }
+};
+</script>
+
+<style scoped>
+.number-text {
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.workorder-card-table {
+    width: 100%;
+    font-size: 16px;
+    font-weight: 500;
+    border: 2px solid #000;
+    border-collapse: collapse;
+}
+
+.workorder-card-table td {
+    border: 2px solid #000;
+    padding: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/qualityManagement/gp12/touchScreen/workorder/components/GenerateLabelDialog.vue b/src/views/qualityManagement/gp12/touchScreen/workorder/components/GenerateLabelDialog.vue
new file mode 100644
index 0000000..c408d19
--- /dev/null
+++ b/src/views/qualityManagement/gp12/touchScreen/workorder/components/GenerateLabelDialog.vue
@@ -0,0 +1,203 @@
+<template>
+    <div>
+        <el-dialog class="dialogBox" :visible.sync="show" title="缺陷项修改" width="400px" append-to-body
+            :close-on-click-modal="false">
+            <el-form label-width="auto">
+                <el-form-item label="工单号">
+                    <div class="number-text">{{ formData.workOrder }}</div>
+                </el-form-item>
+                <el-form-item label="零件号">
+                    <div class="number-text">{{ formData.partNumber }}</div>
+                </el-form-item>
+                <el-form-item label="描述">
+                    <div class="number-text">{{ formData.description }}</div>
+                </el-form-item>
+                <el-form-item label="投入数">
+                    <div class="number-text">{{ requireNumber }}</div>
+                </el-form-item>
+                <el-form-item label="抛光数">
+                    <div class="number-text">{{ formData.polishNumber }}</div>
+                </el-form-item>
+                <el-form-item label="打磨数">
+                    <div class="number-text">{{ formData.damoNumber }}</div>
+                </el-form-item>
+                <el-form-item label="报废数">
+                    <div class="number-text">{{ formData.baofeiNumber }}</div>
+                </el-form-item>
+                <el-form-item label="合格数">
+                    <el-input-number :min="0" class="number-text" v-model="formData.qualifiedNumber"></el-input-number>
+                </el-form-item>
+                <el-form-item label="快速操作">
+                    <el-button type="primary" icon="el-icon-minus" @click="openReduceDialog">减少合格数</el-button>
+                    <el-button type="primary" icon="el-icon-plus" @click="openAddDialog">增加合格数</el-button>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="close">取消</el-button>
+                    <el-button :disabled="loading" type="primary" @click="updateQualifiedNumber">确认修改</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <!-- 减少合格数对话框 -->
+        <el-dialog :visible.sync="reduceDialogVisible" title="减少合格数" width="300px" append-to-body>
+            <el-form label-width="auto">
+                <el-form-item label="减少数量">
+                    <el-input-number :min="1" :max="formData.qualifiedNumber" v-model="changeAmount"
+                        controls-position="right"></el-input-number>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="reduceDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="confirmReduce">确定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <!-- 增加合格数对话框 -->
+        <el-dialog :visible.sync="addDialogVisible" title="增加合格数" width="300px" append-to-body>
+            <el-form label-width="auto">
+                <el-form-item label="增加数量">
+                    <el-input-number :min="1" v-model="changeAmount" controls-position="right"></el-input-number>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="addDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="confirmAdd">确定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
+
+export default {
+    name: 'GenerateLabelDialog',
+    data() {
+        return {
+            loading: false,
+            show: false,
+            reduceDialogVisible: false,
+            addDialogVisible: false,
+            changeAmount: 1,
+            formData: {
+                workOrder: '',
+                partNumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                number: '',
+                labelCode: '',
+                siteNo: '',
+                comNo: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+                polishNumber: 0,
+                damoNumber: 0,
+                baofeiNumber: 0,
+                qualifiedNumber: 0,
+            },
+            team: '',
+            siteNo: '',
+        };
+    },
+    computed: {
+        requireNumber() {
+            return this.formData.polishNumber + this.formData.damoNumber + this.formData.baofeiNumber + this.formData.qualifiedNumber;
+        }
+    },
+    methods: {
+        openReduceDialog() {
+            this.reduceDialogVisible = true;
+            this.changeAmount = 1;
+        },
+        openAddDialog() {
+            this.addDialogVisible = true;
+            this.changeAmount = 1;
+        },
+        confirmReduce() {
+            if (this.changeAmount > 0 && this.changeAmount <= this.formData.qualifiedNumber) {
+                this.formData.qualifiedNumber -= this.changeAmount;
+                this.reduceDialogVisible = false;
+            } else {
+                this.$message.error('请输入有效的减少数量');
+            }
+        },
+        confirmAdd() {
+            if (this.changeAmount > 0) {
+                this.formData.qualifiedNumber += this.changeAmount;
+                this.addDialogVisible = false;
+            } else {
+                this.$message.error('请输入有效的增加数量');
+            }
+        },
+        async updateQualifiedNumber() {
+            try {
+                this.loading = true;
+                await QcGp12Api.GenerateVirtualLabel(this.formData);
+                this.$message.success('修改成功');
+                this.updateFormData();
+                this.close();
+            } catch (error) {
+                this.$message.error('修改失败，请重试');
+            } finally {
+                this.loading = false;
+            }
+        },
+        updateFormData() {
+            this.$emit("updateFormData");
+        },
+        open(data) {
+            this.show = true;
+            this.loading = false;
+            this.formData = { ...data.formData };
+            this.team = data.team;
+            this.siteNo = data.siteNo;
+        },
+        close() {
+            this.show = false;
+            this.resetFormData();
+        },
+        resetFormData() {
+            this.formData = {
+                workOrder: '',
+                partNumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                number: '',
+                labelCode: '',
+                siteNo: '',
+                comNo: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+                polishNumber: 0,
+                damoNumber: 0,
+                baofeiNumber: 0,
+                qualifiedNumber: 0,
+            };
+            this.team = '';
+            this.siteNo = '';
+        }
+    }
+};
+</script>
+
+<style scoped>
+.number-text {
+    font-weight: bold;
+}
+
+.dialog-footer button {
+    margin-left: 10px;
+}
+</style>
diff --git a/src/views/qualityManagement/gp12/touchScreen/workorder/components/StartWorkOrderDialog.vue b/src/views/qualityManagement/gp12/touchScreen/workorder/components/StartWorkOrderDialog.vue
new file mode 100644
index 0000000..91e8676
--- /dev/null
+++ b/src/views/qualityManagement/gp12/touchScreen/workorder/components/StartWorkOrderDialog.vue
@@ -0,0 +1,184 @@
+<template>
+    <el-dialog v-loading="loading" :visible.sync="show" title="开始或继续工单" width="600px" append-to-body
+        :close-on-click-modal="false">
+        <el-form label-width="auto">
+            <el-form-item label="零件号">
+                <div class="number-text">{{ partnumber }}</div>
+            </el-form-item>
+            <el-form-item label="规格">
+                <div class="number-text">{{ specification }}</div>
+            </el-form-item>
+            <el-form-item label="颜色">
+                <div class="number-text">{{ color }}</div>
+            </el-form-item>
+            <el-form-item label="描述">
+                <div class="number-text">{{ description }}</div>
+            </el-form-item>
+            <el-form-item label="零件数">
+                <div class="number-text">{{ number }}</div>
+            </el-form-item>
+            <el-form-item label="标签内容">
+                <div class="number-text">{{ labelCode }}</div>
+            </el-form-item>
+            <div v-if="partnumber">
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="是否抛光件">
+                            <el-switch v-model="isPolish" :active-value="1" :inactive-value="0">
+                            </el-switch>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="是否返工件">
+                            <el-switch v-model="isBack" :active-value="1" :inactive-value="0">
+                            </el-switch>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="标记">
+                            <el-switch v-model="isOut" :active-value="1" :inactive-value="0">
+                            </el-switch>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </div>
+        </el-form>
+        <scanInput @scanInput="handleScanBoxOutLabel"></scanInput>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="close">取消</el-button>
+                <el-button :disabled="loading" type="primary" @click="startWorkOrder">确认开始工单</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import scanInput from '../../components/scanInput.vue';
+import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
+export default {
+    name: 'StartWorkOrderDialog',
+    components: { scanInput },
+    data() {
+        return {
+            loading: false,
+            show: false,
+            partnumber: '',
+            specification: '',
+            color: '',
+            description: '',
+            number: '',
+            labelCode: '',
+            isOnetime: 0,
+            isBack: 0,
+            isPolish: 0,
+            isOut: 0,
+            // 需要传入
+            team: '',
+            siteNo: '',
+            comNo: '未知串口'
+        }
+    },
+    methods: {
+        // 扫外箱标签的情况
+        handleScanBoxOutLabel(label = '', comNo = '未知串口') {
+            const params = {
+                label,
+                // type === 1 获取详细物料信息 2只判断零件号是否正确
+                type: 1
+            }
+            QcGp12Api.AnalyzeLabel(params).then(res => {
+                if (res.code === 200 && res.data.isOk) {
+                    this.partnumber = res.data.partnumber;
+                    this.specification = res.data.specification;
+                    this.color = res.data.color;
+                    this.number = res.data.number;
+                    this.description = res.data.description;
+                    this.labelCode = res.data.labelCode;
+                    this.comNo = comNo;
+                } else {
+                    this.showErrorMessage(3, "标签存在异常！");
+                }
+            })
+        },
+        showErrorMessage(code, message) {
+            this.$emit('showWarningMessage', code, message);
+        },
+        // 确认开始工单
+        startWorkOrder() {
+            const params = {
+                partNumber: this.partnumber,
+                description: this.description,
+                specification: this.specification,
+                color: this.color,
+                team: this.team,
+                siteNo: this.siteNo,
+                comNo: this.comNo,
+                isOnetime: this.isPolish === 0 ? 1 : 0,
+                isBack: this.isBack,
+                isPolish: this.isPolish,
+                isOut: this.isOut,
+                label: this.labelCode,
+            }
+            if (params.partNumber === '' || params.label === '') {
+                this.showErrorMessage(3, "标签信息为空！请检查标签！");
+                return;
+            }
+            this.loading = true
+            // 开始工单
+            QcGp12Api.StartGP12WorkOrder(params).then(res => {
+                if (res.code == 200) {
+                    this.$message.success("开始工单成功！");
+                    this.formDataChange(res.data)
+                    this.changeFormStatus(2)
+                    this.doRefresh()
+                    this.close()
+                    this.loading = false
+                } else {
+                    this.$message.error("开始工单异常！请检查");
+                    this.loading = false
+                }
+            }).catch((err) => {
+                this.$message.error("开始工单异常！请检查");
+                this.loading = false
+            });
+        },
+        formDataChange(data) {
+            this.$emit("formDataChange", data)
+        },
+        changeFormStatus(type) {
+            // type = 2 进入内标签扫码模式
+            this.$emit("changeFormStatus", type)
+        },
+        doRefresh() {
+            this.$emit('refresh');
+        },
+        open(data) {
+            this.show = true
+            this.loading = false
+            this.team = data.team
+            this.siteNo = data.siteNo
+            this.partnumber = ''
+            this.specification = ''
+            this.color = ''
+            this.description = ''
+            this.number = ''
+            this.labelCode = ''
+            this.isOnetime = 0
+            this.isBack = 0
+            this.isPolish = 0
+            this.isOut = 0
+        },
+        close() {
+            this.show = false
+        }
+    }
+};
+</script>
+
+<style scoped>
+.number-text {
+    font-size: 20px;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/qualityManagement/gp12/touchScreen/workorder/components/WorkOrderCard.vue b/src/views/qualityManagement/gp12/touchScreen/workorder/components/WorkOrderCard.vue
new file mode 100644
index 0000000..a772f38
--- /dev/null
+++ b/src/views/qualityManagement/gp12/touchScreen/workorder/components/WorkOrderCard.vue
@@ -0,0 +1,357 @@
+<template>
+    <div>
+        <el-card class="workorder-card">
+            <div class="workorder-card-header">
+                <div>
+                    <span>工单编号:</span>
+                    <span>{{ formData.workOrder }}</span>
+                </div>
+                <div>
+                    <span :class="messageClass">{{ message }}</span>
+                </div>
+            </div>
+            <div class="workorder-card-button-box">
+                <div>
+                    <el-button type="primary" @click="doRefresh">刷新</el-button>
+                </div>
+                <div>
+                    <el-button v-if="formStatus === 1" type="success" @click="doBtnStartWorkOrder">开启工单</el-button>
+                    <el-button v-if="formStatus === 2" type="info" @click="doBtnGenerateLabel">修改合格数</el-button>
+                    <el-button v-if="formStatus === 2" type="warning" @click="doBtnEndWorkOrder">结束工单</el-button>
+                </div>
+            </div>
+            <div class="workorder-card-action-box">
+                <div>
+                    <span>站点: </span>
+                    <el-select :disabled="formStatus === 2" style="width: 140px;" v-model="site" placeholder="请选择站点"
+                        @change="selectChange">
+                        <el-option v-for="item in siteOptions" :key="item.code" :label="item.name"
+                            :value="item.code"></el-option>
+                    </el-select>
+                </div>
+                <div>
+                    <span>班组: </span>
+                    <el-select :disabled="formStatus === 2" style="width: 140px;" v-model="team" placeholder="请选择班组"
+                        @change="selectChange">
+                        <el-option v-for="item in teamOptions" :key="item.code" :label="item.name"
+                            :value="item.code"></el-option>
+                    </el-select>
+                </div>
+            </div>
+            <table v-if="formData.workOrder" class="workorder-card-table">
+                <tr>
+                    <td>零件号</td>
+                    <td>{{ formData.partNumber }}</td>
+                    <td>描述</td>
+                    <td>{{ formData.description }}</td>
+                </tr>
+                <tr>
+                    <td>规格</td>
+                    <td>{{ formData.specification }}</td>
+                    <td>颜色</td>
+                    <td>{{ formData.color }}</td>
+                </tr>
+                <tr>
+                    <td>来源</td>
+                    <td>{{ formData.isOnetime === 1 ? "一次合格" : "抛光件" }}</td>
+                    <td>类别</td>
+                    <td>{{ formData.isBack === 1 ? "返工件" : "正常件" }}</td>
+                </tr>
+                <tr>
+                    <td>投入数</td>
+                    <td>{{ formData.requireNumber }}</td>
+                    <td>合格数</td>
+                    <td>
+                        {{ formData.qualifiedNumber }}
+
+                    </td>
+                </tr>
+                <tr>
+                    <td>合格率</td>
+                    <td>{{ qualifiedRate }}</td>
+                    <td>抛光数</td>
+                    <td>{{ formData.polishNumber }}</td>
+                </tr>
+                <tr>
+                    <td>打磨数</td>
+                    <td>{{ formData.damoNumber }}</td>
+                    <td>报废数</td>
+                    <td>{{ formData.baofeiNumber }}</td>
+                </tr>
+                <tr>
+                    <td>开始时间</td>
+                    <td>{{ formData.startTime }}</td>
+                    <td>结束时间</td>
+                    <td>{{ formData.endTime }}</td>
+                </tr>
+            </table>
+        </el-card>
+        <StartWorkOrderDialog ref="StartWorkOrderDialogRef" @showWarningMessage="showErrorMessage"
+            @changeFormStatus="changeFormStatus" @formDataChange="formDataChange" @refresh="doRefresh" />
+        <EndWorkOrderDialog ref="EndWorkOrderDialogRef" @changeFormStatus="changeFormStatus"
+            @clearFormData="clearFormData" />
+        <GenerateLabelDialog ref="GenerateLabelDialogRef" @updateFormData="updateFormData"></GenerateLabelDialog>
+    </div>
+</template>
+
+<script>
+import StartWorkOrderDialog from './StartWorkOrderDialog.vue';
+import EndWorkOrderDialog from './EndWorkOrderDialog.vue';
+import GenerateLabelDialog from './GenerateLabelDialog.vue';
+import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
+export default {
+    name: 'WorkOrderCard',
+    components: { StartWorkOrderDialog, EndWorkOrderDialog, GenerateLabelDialog },
+    props: {
+        message: String,
+        messageClass: String
+    },
+    data() {
+        return {
+            StartWorkOrderDialogRef: null,
+            EndWorkOrderDialogRef: null,
+            sessionKey: '_touchScreenA01',
+
+            teamOptions: [],
+            siteOptions: [],
+            // 站点工单执行状态 1-初始状态（扫外箱标签） 2-工单执行中（扫内标签）
+            formStatus: 1,
+            team: '',
+            site: '',
+            formData: {
+                workOrder: '',
+                partnumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+            },
+        };
+    },
+    created() {
+        this.init();
+    },
+    computed: {
+        qualifiedRate() {
+            if (this.formData.requireNumber > 0) {
+                const rate = Math.floor((this.formData.qualifiedNumber / this.formData.requireNumber) * 100);
+                return `${rate}%`;
+            } else {
+                return "0%";
+            }
+        }
+    },
+    methods: {
+        validateWorkOrder() {
+            if (!this.formData.workOrder) {
+                this.showErrorMessage(1, '未生成有效工单,请扫描箱标签');
+                return false;
+            }
+            return true;
+        },
+        showErrorMessage(code, message) {
+            this.$emit('showWarningMessage', code, message);
+        },
+        async init() {
+            try {
+                // 初始化数据
+                let teams = await QcGp12Api.GetGroupOptions()
+                let sites = await QcGp12Api.GetStieOptions()
+                let groups = await QcGp12Api.GetDefectInitOptions()
+                this.teamOptions = teams.data
+                this.siteOptions = sites.data
+                this.groups = groups.data
+                // 缓存数据读取
+                this.getLocalStorage()
+            } catch (error) {
+                console.error(error);
+            }
+        },
+
+        clearFormData() {
+            this.formData = {
+                workOrder: '',
+                partnumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+            }
+        },
+        selectChange() {
+            this.setLocalStorage()
+        },
+        setLocalStorage() {
+            const data = {
+                team: this.team,
+                site: this.site
+            }
+            localStorage.setItem(this.sessionKey, JSON.stringify(data));
+        },
+        getLocalStorage() {
+            const data = JSON.parse(localStorage.getItem(this.sessionKey));
+            if (data) {
+                this.team = data.team
+                this.site = data.site
+            }
+        },
+        // 更新工单数据
+        updateFormData() {
+            const params = {
+                workOrder: this.formData.workOrder
+            }
+            if (params.workOrder === '' || params.workOrder === null) {
+                return;
+            }
+            QcGp12Api.UpdateWorkOrderDetail(params).then(res => {
+                if (res.code === 200) {
+                    this.formData = res.data
+                    this.formDataChange()
+                }
+            })
+        },
+        changeFormStatus(type) {
+            this.formStatus = type
+        },
+        setMqttMessage(LabelCode, ComNo, SiteNo) {
+            if (SiteNo !== this.site) {
+                return;
+            }
+            // 解析结果
+            if (this.formStatus === 1) {
+                // 扫外箱标签模式
+                this.$refs.StartWorkOrderDialogRef.handleScanBoxOutLabel(LabelCode, ComNo)
+                return;
+            }
+            // 扫内标签模式
+            if (this.formStatus === 2) {
+                // 扫内标签模式
+                this.handleScanInnerLabel(LabelCode, ComNo)
+                return;
+            }
+        },
+        // 扫内标签的情况
+        handleScanInnerLabel(label = '', comNo = "未知串口") {
+            const params = {
+                workOrder: this.formData.workOrder,
+                partNumber: this.formData.partNumber,
+                team: this.team,
+                siteNo: this.site,
+                comNo: comNo,
+                labelType: 2,
+                label,
+            }
+            QcGp12Api.ScanInnerLabel(params).then(res => {
+                if (res.code === 200 && res.data === "ok") {
+                    this.showErrorMessage(0);
+                    this.updateFormData()
+                } else {
+                    this.showErrorMessage(3, res.data);
+                }
+            });
+        },
+        // 工单数据变更
+        formDataChange(data = null) {
+            if (data) {
+                this.formData = data
+            }
+            this.$emit("formDataChange", this.formData)
+        },
+        doRefresh() {
+            this.$emit('refresh');
+            this.showErrorMessage(0);
+        },
+        clearFormData() {
+            this.formData = {
+                workOrder: '',
+                partnumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+            }
+            this.$emit('clear');
+        },
+        doBtnStartWorkOrder() {
+            const data = {
+                team: this.team,
+                siteNo: this.siteNo,
+            }
+            this.$refs.StartWorkOrderDialogRef.open(data);
+        },
+        doBtnEndWorkOrder() {
+            const data = {
+                formData: this.formData,
+                team: this.team,
+                siteNo: this.siteNo,
+            }
+            this.$refs.EndWorkOrderDialogRef.open(data);
+        },
+        doBtnGenerateLabel() {
+            const data = {
+                formData: this.formData,
+                team: this.team,
+                siteNo: this.siteNo,
+            }
+            this.$refs.GenerateLabelDialogRef.open(data);
+        }
+    }
+};
+</script>
+
+<style scoped>
+.workorder-card {
+    min-height: 400px;
+}
+
+
+.workorder-card-header {
+    width: 100%;
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.workorder-card-table {
+    width: 100%;
+    font-size: 16px;
+    font-weight: 500;
+    border: 2px solid #000;
+    border-collapse: collapse;
+}
+
+.workorder-card-table td {
+    border: 2px solid #000;
+    padding: 5px;
+}
+
+.workorder-card-button-box {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.workorder-card-action-box {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/qualityManagement/gp12/touchScreen/workorder/index-backup.vue b/src/views/qualityManagement/gp12/touchScreen/workorder/index-backup.vue
new file mode 100644
index 0000000..35a7ae6
--- /dev/null
+++ b/src/views/qualityManagement/gp12/touchScreen/workorder/index-backup.vue
@@ -0,0 +1,1000 @@
+<template>
+    <div ref="container" class="container">
+        <el-row :gutter="10">
+            <el-col :span="8" v-for="(group, index) in groups" :key="index">
+                <el-card shadow="hover" class="box-card">
+                    <div class="card-header">
+                        {{ group.groupName }}
+                    </div>
+                    <div>
+                        <el-row :gutter="5" v-for="row, rowIndex in rowList" :key="rowIndex">
+                            <el-col :span="2">
+                                <div class="defect-item-left">{{ row }}</div>
+                            </el-col>
+                            <el-col v-if="item.type === row" :span="3" v-for="(item, index) in group.children"
+                                :key="index">
+                                <div class="defect-item-box" @mousedown="handleStart($event, item)"
+                                    @mouseup="handleEnd($event, item)" @touchstart="handleStart($event, item)"
+                                    @touchend="handleEnd($event, item)">
+                                    <div class="defect-item-name">{{ item.name }}</div>
+                                    <div class="defect-item-number">{{ getClickItemNum(item) }}</div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-card>
+            </el-col>
+            <el-col :span="8">
+                <el-card class="workorder-card">
+                    <div class="workorder-card-header">
+                        <div>
+                            <span>工单编号:</span>
+                            <span>{{ formData.workOrder }}</span>
+                        </div>
+                        <div>
+                            <span :class="messageClass">{{ message }}</span>
+                        </div>
+                    </div>
+                    <div class="workorder-card-button-box">
+                        <div>
+                            <el-button type="primary" @click="doRefresh">刷新</el-button>
+                        </div>
+                        <div>
+                            <el-button v-if="formStatus === 1" type="success"
+                                @click="doBtnStartWorkOrder">开始工单</el-button>
+                            <el-button v-if="formStatus === 2" type="warning"
+                                @click="doBtnEndWorkOrder">结束工单</el-button>
+                        </div>
+                    </div>
+                    <div class="workorder-card-action-box">
+                        <div>
+                            <span>站点: </span>
+                            <el-select style="width: 140px;" v-model="site" placeholder="请选择站点" @change="selectChange">
+                                <el-option v-for="item in siteOptions" :key="item.code" :label="item.name"
+                                    :value="item.code">
+                                </el-option>
+                            </el-select>
+                        </div>
+
+                        <div>
+                            <span>班组: </span>
+                            <el-select style="width: 140px;" v-model="team" placeholder="请选择班组" @change="selectChange">
+                                <el-option v-for="item in teamOptions" :key="item.code" :label="item.name"
+                                    :value="item.code">
+                                </el-option>
+                            </el-select>
+                        </div>
+                    </div>
+                    <table v-if="formData.workOrder" class="workorder-card-table">
+                        <tr>
+                            <td>零件号</td>
+                            <td>{{ formData.partNumber }}</td>
+                            <td>描述</td>
+                            <td>{{ formData.description }}</td>
+                            <!-- <td :colspan="3">GEN12鲨鱼鳍</td> -->
+                        </tr>
+                        <tr>
+                            <td>规格</td>
+                            <td>{{ formData.specification }}</td>
+                            <td>颜色</td>
+                            <td>{{ formData.color }}</td>
+                        </tr>
+                        <tr>
+                            <td>来源</td>
+                            <td>{{ formData.isOnetime === 1 ? "一次合格" : "抛光件" }}</td>
+                            <td>类别</td>
+                            <td>{{ formData.isBack === 1 ? "返工件" : "正常件" }}</td>
+                        </tr>
+                        <tr>
+                            <td>投入数</td>
+                            <td>{{ formData.requireNumber }}</td>
+                            <td>合格数</td>
+                            <td>{{ formData.qualifiedNumber }}</td>
+                        </tr>
+                        <tr>
+                            <td>合格率</td>
+                            <td>{{ qualifiedRate }}</td>
+                            <td>抛光数</td>
+                            <td>{{ formData.polishNumber }}</td>
+                        </tr>
+                        <tr>
+                            <td>打磨数</td>
+                            <td>{{ formData.damoNumber }}</td>
+                            <td>报废数</td>
+                            <td>{{ formData.baofeiNumber }}</td>
+                        </tr>
+                        <tr>
+                            <td>开始时间</td>
+                            <td>{{ formData.startTime }}</td>
+                            <td>结束时间</td>
+                            <td>{{ formData.endTime }}</td>
+                        </tr>
+                    </table>
+                </el-card>
+            </el-col>
+        </el-row>
+        <!-- 修改缺陷项 -->
+        <el-dialog class="dialogBox" :visible="updateDialogShow" title="缺陷项修改" width="400px" append-to-body
+            :close-on-click-modal="false">
+            <el-form label-width="auto">
+                <el-form-item label="工单号">
+                    <div class="number-text">{{ formData.workOrder }}</div>
+                </el-form-item>
+                <el-form-item label="缺陷项">
+                    <div class="number-text">{{ updateName }}</div>
+                </el-form-item>
+                <el-form-item label="缺陷数">
+                    <el-input-number :min="0" class="number-text" v-model="updateNum"></el-input-number>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="updateDialogShow = false">取消</el-button>
+                    <el-button type="primary" @click="updateDefectNum"> 确认修改 </el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <!-- 开始工单 -->
+        <el-dialog v-loading="startWorkOrderDialog.loading" :visible.sync="startWorkOrderDialog.show"
+            :title="startWorkOrderDialog.title" width="600px" append-to-body :close-on-click-modal="false">
+            <el-form label-width="auto">
+                <el-form-item label="零件号">
+                    <div class="number-text">{{ startWorkOrderDialog.partnumber }}</div>
+                </el-form-item>
+                <el-form-item label="规格">
+                    <div class="number-text">{{ startWorkOrderDialog.specification }}</div>
+                </el-form-item>
+                <el-form-item label="颜色">
+                    <div class="number-text">{{ startWorkOrderDialog.color }}</div>
+                </el-form-item>
+                <el-form-item label="描述">
+                    <div class="number-text">{{ startWorkOrderDialog.description }}</div>
+                </el-form-item>
+                <el-form-item label="零件数">
+                    <div class="number-text">{{ startWorkOrderDialog.number }}</div>
+                </el-form-item>
+                <el-form-item label="标签内容">
+                    <div class="number-text">{{ startWorkOrderDialog.labelCode }}</div>
+                </el-form-item>
+                <div v-if="startWorkOrderDialog.partnumber">
+                    <el-row>
+                        <el-col :span="8">
+                            <el-form-item label="是否抛光件">
+                                <el-switch v-model="startWorkOrderDialog.isPolish" :active-value="1"
+                                    :inactive-value="0">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="是否返工件">
+                                <el-switch v-model="startWorkOrderDialog.isBack" :active-value="1" :inactive-value="0">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="标记">
+                                <el-switch v-model="startWorkOrderDialog.isOut" :active-value="1" :inactive-value="0">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-form>
+            <scanInput @scanInput="handleScanBoxOutLabel"></scanInput>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="closeStartWorkOrderDialog">取消</el-button>
+                    <el-button :disabled="startWorkOrderDialog.loading" type="primary" @click="startWorkOrder"> 确认开始工单
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <!-- 结束工单 -->
+        <el-dialog v-loading="endWorkOrderDialog.loading" :visible.sync="endWorkOrderDialog.show"
+            :title="endWorkOrderDialog.title" width="90%" append-to-body :close-on-click-modal="false">
+            <el-form label-width="auto">
+                <el-row :gutter="20">
+                    <el-col :span="6">
+                        <el-form-item label="工单号">
+                            <div class="number-text">{{ formData.workOrder }}</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="零件号">
+                            <div class="number-text">{{ formData.partNumber }}</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="规格">
+                            <div class="number-text">{{ formData.specification }}</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="颜色">
+                            <div class="number-text">{{ formData.color }}</div>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="6">
+                        <el-form-item label="描述">
+                            <div class="number-text">{{ formData.description }}</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="3">
+                        <el-form-item label="站点">
+                            <div class="number-text">{{ site }}</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="3">
+                        <el-form-item label="班组">
+                            <div class="number-text">{{ team }}</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="来源">
+                            <div class="number-text">{{ formData.isOnetime === 1 ? "一次合格" : "抛光件" }}</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="类别">
+                            <div class="number-text">{{ formData.isBack === 1 ? "返工件" : "正常件" }}</div>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <table class="workorder-card-table">
+                    <tr>
+                        <td>投入数</td>
+                        <td>{{ formData.requireNumber }}</td>
+                        <td>合格数</td>
+                        <td>{{ formData.qualifiedNumber }}</td>
+                        <td>合格率</td>
+                        <td>{{ qualifiedRate }}</td>
+                    </tr>
+                    <tr>
+                        <td>抛光数</td>
+                        <td>{{ formData.polishNumber }}</td>
+                        <td>打磨数</td>
+                        <td>{{ formData.damoNumber }}</td>
+                        <td>报废数</td>
+                        <td>{{ formData.baofeiNumber }}</td>
+                    </tr>
+                    <tr>
+                        <td>开始时间</td>
+                        <td>{{ formData.startTime }}</td>
+                        <td>结束时间</td>
+                        <td>{{ formData.endTime }}</td>
+                        <td>工单状态</td>
+                        <td>{{ formData.endTime ? "已结束" : "未结束" }}</td>
+                    </tr>
+                </table>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="closeEndWorkOrderDialog">取消</el-button>
+                    <el-button :disabled="endWorkOrderDialog.loading" type="primary" @click="endWorkOrder()">
+                        确认结束工单并生成报表
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import * as emqxUtil from '@/utils/mqtt/emqxUtil';
+import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
+import scanInput from '../components/scanInput.vue';
+export default {
+    name: 'WorkOrder',
+    components: { scanInput },
+    data() {
+        return {
+            mqttClient: null,
+            mqttClientId: emqxUtil.title + 'GP12' + Math.random().toString(16).substring(1, 10),
+            sessionKey: '_touchScreenA01',
+            groups: [
+                { groupName: '油漆', children: [] },
+                { groupName: '设备', children: [] },
+                { groupName: '毛坯', children: [] },
+                { groupName: '程序', children: [] },
+                { groupName: '班组操作', children: [] }
+            ],
+            rowList: ['抛光', '打磨', '报废'],
+            // 缺陷数据
+            defectList: [],
+            teamOptions: [],
+            siteOptions: [],
+            // 站点工单执行状态 1-初始状态（扫外箱标签） 2-工单执行中（扫内标签）
+            formStatus: 1,
+            team: '',
+            site: '',
+            formData: {
+                workOrder: '',
+                partnumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+            },
+            messageClass: 'text-green',
+            message: '正常',
+            // 按钮
+            isLongPress: false,
+            pressTimer: null,
+            updateDialogShow: false,
+            updateName: '',
+            updateCode: '',
+            updateNum: 0,
+            // 开始工单弹框
+            startWorkOrderDialog: {
+                show: false,
+                loading: false,
+                title: '开始工单',
+                partnumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                number: '',
+                labelCode: '',
+                siteNo: '',
+                comNo: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+            },
+            // 结束工单弹框
+            endWorkOrderDialog: {
+                show: false,
+                loading: false,
+                title: '结束工单',
+                partnumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                number: '',
+                labelCode: '',
+                siteNo: '',
+                comNo: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+            }
+        };
+    },
+    computed: {
+        // 20250103 TODO 投入数，合格数，合格率，抛光数，打磨数，报废数 计算
+        qualifiedRate() {
+            console.log('requireNumber:', this.formData.requireNumber);
+            console.log('qualifiedNumber:', this.formData.qualifiedNumber);
+
+            if (this.formData.requireNumber > 0) {
+                const rate = Math.floor((this.formData.qualifiedNumber / this.formData.requireNumber) * 100);
+                return `${rate}%`;
+            } else {
+                return "0%";
+            }
+        }
+    },
+    created() {
+        this.init();
+    },
+    mounted() {
+        this.doMounted();
+    },
+    beforeDestroy() {
+        this.dobeforeDestroy();
+    },
+    methods: {
+        async init() {
+            // 初始化数据
+            let teams = await QcGp12Api.GetGroupOptions()
+            let sites = await QcGp12Api.GetStieOptions()
+            let groups = await QcGp12Api.GetDefectInitOptions()
+            this.teamOptions = teams.data
+            this.siteOptions = sites.data
+            this.groups = groups.data
+            // 缓存数据读取
+            this.getLocalStorage()
+            this.initMqtt()
+        },
+        selectChange() {
+            this.setLocalStorage()
+        },
+        setLocalStorage() {
+            const data = {
+                team: this.team,
+                site: this.site
+            }
+            localStorage.setItem(this.sessionKey, JSON.stringify(data));
+        },
+        getLocalStorage() {
+            const data = JSON.parse(localStorage.getItem(this.sessionKey));
+            if (data) {
+                this.team = data.team
+                this.site = data.site
+            }
+        },
+        doMounted() {
+            const options = { passive: true };
+            this.$refs.container.addEventListener('touchmove', this.handleTouchMove, options);
+        },
+        dobeforeDestroy() {
+            this.$refs.container.removeEventListener('touchmove', this.handleTouchMove);
+            this.closeWriter();
+            this.closeReader();
+            if (this.serialPort && this.serialPort.readable) {
+                this.serialPort.close();
+            }
+            emqxUtil.endClient(this.mqttClient);
+        },
+        handleTouchMove(event) {
+            // 处理 touchmove 事件（如果需要）
+        },
+        async doRefresh() {
+            await this.init()
+            this.getDefectListByWorkOrder()
+        },
+        clearFormData() {
+            this.formData = {
+                workOrder: '',
+                partnumber: '',
+                specification: '',
+                color: '',
+                description: '',
+                isOnetime: 0,
+                isBack: 0,
+                isPolish: 0,
+                isOut: 0,
+            }
+        },
+        // 更新工单数据
+        updateFormData() {
+            const params = {
+                workOrder: this.formData.workOrder
+            }
+            if (params.workOrder === '' || params.workOrder === null) {
+                return;
+            }
+            QcGp12Api.UpdateWorkOrderDetail(params).then(res => {
+                if (res.code === 200) {
+                    this.formData = res.data
+                }
+            })
+        },
+        handlerScanInput(value) {
+            this.handleAnalyzeLabel(value)
+        },
+        // 工单开始按钮
+        doBtnStartWorkOrder() {
+            this.clearAddFormData()
+            this.startWorkOrderDialog.show = true
+        },
+        // 扫外箱标签的情况
+        handleScanBoxOutLabel(label = '', comNo = '未知串口') {
+            const params = {
+                label,
+                // type === 1 获取详细物料信息 2只判断零件号是否正确
+                type: 1
+            }
+            QcGp12Api.AnalyzeLabel(params).then(res => {
+                if (res.code === 200 && res.data.isOk) {
+                    this.message = '正常';
+                    this.messageClass = 'text-green';
+                    this.startWorkOrderDialog.partnumber = res.data.partnumber;
+                    this.startWorkOrderDialog.specification = res.data.specification;
+                    this.startWorkOrderDialog.color = res.data.color;
+                    this.startWorkOrderDialog.number = res.data.number;
+                    this.startWorkOrderDialog.description = res.data.description;
+                    this.startWorkOrderDialog.labelCode = res.data.labelCode;
+                    this.startWorkOrderDialog.comNo = comNo;
+                } else {
+                    this.$confirm('标签异常:' + res.data.msg, '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning',
+                        center: true
+                    }).then(() => {
+                    }).catch(() => {
+                    });
+                    this.message = '标签存在异常';
+                    this.messageClass = 'text-red';
+                }
+            })
+        },
+        // 确认开始工单
+        startWorkOrder() {
+            const params = {
+                partNumber: this.startWorkOrderDialog.partnumber,
+                description: this.startWorkOrderDialog.description,
+                specification: this.startWorkOrderDialog.specification,
+                color: this.startWorkOrderDialog.color,
+                team: this.team,
+                siteNo: this.site,
+                comNo: this.startWorkOrderDialog.comNo,
+                isOnetime: this.startWorkOrderDialog.isPolish === 0 ? 1 : 0,
+                isBack: this.startWorkOrderDialog.isBack,
+                isPolish: this.startWorkOrderDialog.isPolish,
+                isOut: this.startWorkOrderDialog.isOut,
+                label: this.startWorkOrderDialog.labelCode,
+            }
+            if (params.partNumber === '' || params.label === '') {
+                this.$confirm('未扫描正确箱标签', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    center: true
+                }).then(() => {
+                }).catch(() => {
+                });
+                return;
+            }
+            this.startWorkOrderDialog.loading = true
+            // 开始工单
+            QcGp12Api.StartGP12WorkOrder(params).then(res => {
+                if (res.code == 200) {
+                    this.$message.success("开始工单成功！");
+                    this.formData = res.data
+                    // 进入内标签扫码模式
+                    this.formStatus = 2
+                    this.getDefectListByWorkOrder()
+                    this.closeStartWorkOrderDialog()
+                    this.startWorkOrderDialog.loading = false
+                } else {
+                    this.$message.error("开始工单异常！");
+                    this.closeStartWorkOrderDialog()
+                    this.startWorkOrderDialog.loading = false
+                }
+            });
+        },
+        clearAddFormData() {
+            this.startWorkOrderDialog.loading = false;
+            this.startWorkOrderDialog.partnumber = '';
+            this.startWorkOrderDialog.specification = '';
+            this.startWorkOrderDialog.color = '';
+            this.startWorkOrderDialog.number = '';
+            this.startWorkOrderDialog.description = '';
+            this.startWorkOrderDialog.labelCode = '';
+            this.startWorkOrderDialog.isOnetime = 0;
+            this.startWorkOrderDialog.isPolish = 0;
+            this.startWorkOrderDialog.isBack = 0;
+            this.startWorkOrderDialog.isOut = 0;
+        },
+        closeStartWorkOrderDialog() {
+            this.startWorkOrderDialog.show = false
+            this.clearAddFormData()
+        },
+        closeEndWorkOrderDialog() {
+            this.endWorkOrderDialog.show = false
+            this.endWorkOrderDialog.loading = false;
+        },
+        // 扫内标签的情况
+        handleScanInnerLabel(label = '', comNo = "未知串口") {
+            console.log(label, comNo);
+            const params = {
+                workOrder: this.formData.workOrder,
+                partNumber: this.formData.partNumber,
+                team: this.team,
+                siteNo: this.site,
+                comNo: comNo,
+                labelType: 2,
+                label,
+            }
+            QcGp12Api.ScanInnerLabel(params).then(res => {
+                if (res.code === 200 && res.data === "ok") {
+                    this.message = '正常';
+                    this.messageClass = 'text-green';
+                    this.updateFormData()
+                } else {
+                    this.$message.error("扫描内标签异常！" + res.data);
+                    this.message = res.data;
+                    this.messageClass = 'text-red';
+                }
+            });
+        },
+        // 工单结束按钮
+        doBtnEndWorkOrder() {
+            this.endWorkOrderDialog.show = true
+            // this.formStatus = 1
+        },
+        endWorkOrder() {
+            this.$confirm('是否确认完成工单并生成报表!', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'info',
+                center: true
+            }).then(() => {
+                QcGp12Api.EndGP12WorkOrderAndCreateStatistics(this.formData).then(res => {
+                    if (res.code === 200 && res.data === "ok") {
+                        this.$message.success("结束工单并生成报表成功！");
+                        this.clearFormData();
+                        this.init()
+                        this.formStatus = 1
+                        this.endWorkOrderDialog.show = false
+                    } else {
+                        this.$message.error("结束工单异常！" + res.msg);
+                    }
+                });
+            }).catch(() => {
+            });
+        },
+
+        handleAnalyzeLabel(label = '') {
+            const params = {
+                label,
+                // type === 1 获取详细物料信息 2只判断零件号是否正确
+                type: 1
+            }
+            QcGp12Api.AnalyzeLabel(params).then(res => {
+                if (res.code === 200 && res.data.isOk) {
+                    this.message = '正常';
+                    this.messageClass = 'text-green';
+                } else {
+                    this.$confirm('标签异常:' + res.data.msg, '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning',
+                        center: true
+                    }).then(() => {
+                    }).catch(() => {
+                    });
+                    this.message = '标签存在异常';
+                    this.messageClass = 'text-red';
+                }
+            })
+        },
+        handleStart(event, item) {
+            // 如果是触摸事件，阻止其默认行为（如滚动）
+            if (event.type.startsWith('touch')) event.preventDefault();
+            // 清除之前的定时器
+            if (this.pressTimer) clearTimeout(this.pressTimer);
+            // 设置新的定时器，用于判断长按
+            this.pressTimer = setTimeout(() => {
+                this.isLongPress = true;
+                //console.log('长按');
+                // 这里执行长按的逻辑
+                this.showUpdateDialog(item);
+            }, 500); // 长按的阈值设为500毫秒
+        },
+        handleEnd(event, item = null) {
+            if (!item) return;
+            // 清除定时器
+            if (this.pressTimer) clearTimeout(this.pressTimer);
+            // 这里执行短按或长按结束的逻辑
+            this.clickQualityIte(item);
+            this.isLongPress = false;
+        },
+        clickQualityIte(item) {
+            // 长按则跳过
+            if (this.isLongPress) {
+                return;
+            }
+            //console.log('短按');
+            const workOrder = this.formData.workOrder;
+            if (workOrder === null || workOrder === '') {
+                this.$confirm('未生成有效工单,请扫描箱标签', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    center: true
+                }).then(() => {
+                }).catch(() => {
+                });
+                this.message = '未扫描箱标签';
+                this.messageClass = 'text-red';
+                return;
+            }
+            const params = {
+                workOrder: this.formData.workOrder,
+                defectCode: item.code,
+                defectNum: item.num || 0,
+                // 1-短按 2-长按
+                type: "1",
+            };
+
+            QcGp12Api.ChangeWorkOrderDefect(params).then(res => {
+                if (res.code === 200) {
+                    // const newNum = this.getClickItemNum(item) + 1;
+                    //this.$set(item, 'num', newNum);
+                    this.getDefectListByWorkOrder()
+                    this.updateFormData()
+                } else {
+                    this.$message.error('缺陷项点击异常');
+                }
+            })
+        },
+        showUpdateDialog(item) {
+            const workOrder = this.formData.workOrder;
+            if (workOrder === null || workOrder === '') {
+                this.$confirm('未生成有效工单,请扫描箱标签', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    center: true
+                }).then(() => {
+                }).catch(() => {
+                });
+                this.message = '未扫描箱标签';
+                this.messageClass = 'text-red';
+                return;
+            }
+            this.updateName = item.type + '-' + item.name;
+            this.updateCode = item.code;
+            this.updateNum = this.getClickItemNum(item);
+            this.updateDialogShow = true;
+
+        },
+        updateDefectNum() {
+            const workOrder = this.formData.workOrder;
+            if (workOrder === null || workOrder === '') {
+                this.$confirm('未生成有效工单,请扫描箱标签', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    center: true
+                }).then(() => {
+                }).catch(() => {
+                });
+                this.message = '未扫描箱标签';
+                this.messageClass = 'text-red';
+                return;
+            }
+            const params = {
+                workOrder: this.formData.workOrder,
+                defectCode: this.updateCode,
+                defectNum: this.updateNum || 0,
+                // 1-短按 2-长按
+                type: "2",
+            };
+            QcGp12Api.ChangeWorkOrderDefect(params).then(res => {
+                if (res.code === 200) {
+                    this.getDefectListByWorkOrder()
+                    this.updateFormData()
+                    this.updateDialogShow = false;
+                    this.isLongPress = false;
+                } else {
+                    this.$message.error('缺陷项点击异常');
+                }
+            })
+        },
+        getClickItemNum(item) {
+            if (!item.num) {
+                return 0;
+            }
+            return parseInt(item.num, 0);
+        },
+        setDefectNum(defectCode, num) {
+            // 更新缺陷数量的方法
+            for (let group of this.groups) {
+                for (let child of group.children) {
+                    if (child.code === defectCode) {
+                        child.num = num;
+                        break;
+                    }
+                }
+            }
+        },
+        // 获取工单缺陷项(刷新)
+        getDefectListByWorkOrder() {
+            const params = {
+                workOrder: this.formData.workOrder,
+            };
+            if (params.workOrder == null || params.workOrder == '') {
+                return;
+            }
+            QcGp12Api.GetWorkOrderDefectList(params).then(res => {
+                if (res.code === 200 && res.data.length > 0) {
+                    let _list = res.data;
+                    for (let item of _list) {
+                        this.setDefectNum(item.defectCode, item.defectNum);
+                    }
+                }
+            })
+        },
+        closeWriter() {
+            if (this.writer) {
+                try {
+                    this.writer.releaseLock();
+                    this.writer = null;
+                } catch (error) {
+                    console.error('Error releasing writer lock:', error);
+                }
+            }
+        },
+        closeReader() {
+            if (this.reader) {
+                try {
+                    this.reader.cancel();
+                    this.reader = null;
+                } catch (error) {
+                    console.error('Error canceling reader:', error);
+                }
+            }
+        },
+        // mqtt 操作
+        initMqtt() {
+            const that = this;
+            if (that.mqttClient !== null && that.mqttClient.connected) {
+                // 已建立连接
+                return;
+            }
+            // 需要传输或订阅的内容
+            const _topic = emqxUtil.GP12Topic;
+            that.mqttClient = emqxUtil.createClient(that.mqttClientId);
+            // 订阅所有值变动
+            that.mqttClient.subscribe(_topic.SiteComLabelCode + '/#');
+            that.mqttClient.on('message', function (topic, message) {
+                if (topic === _topic.SiteComLabelCode) {
+                    const objData = emqxUtil.parseJSON(message);
+                    if (objData && objData.SiteNo === that.site) {
+                        that.doMqttAction(objData)
+                    }
+                }
+            })
+        },
+        // 执行mqtt消息动作
+        doMqttAction(objData) {
+            const { SiteNo, ComNo, LabelCode, Time } = objData;
+            if (!LabelCode) {
+                this.$message.error("标签为空!");
+                return;
+            }
+            const params = {
+                label: LabelCode,
+                // 1 获取详细物料信息 2只判断零件号是否正确
+                type: 1
+            }
+            // 解析结果
+            if (this.formStatus === 1 && this.startWorkOrderDialog.show) {
+                // 扫外箱标签模式
+                this.handleScanBoxOutLabel(LabelCode, ComNo)
+                return;
+            }
+            // 扫内标签模式
+            if (this.formStatus === 2) {
+                // 扫内标签模式
+                this.handleScanInnerLabel(LabelCode, ComNo)
+                return;
+            }
+        },
+    }
+};
+</script>
+
+<style scoped>
+.box-card {
+    width: 100%;
+    background-color: #032169;
+    /* 深墨绿色背景 */
+    color: #ecf0f1;
+    /* 浅灰色文字颜色 */
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    /* 设置阴影 */
+    margin-top: 2px;
+    margin-bottom: 2px;
+    /* 增加卡片底部间距 */
+}
+
+.card-header {
+    color: #ecf0f1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.workorder-card {
+    min-height: 400px;
+}
+
+
+.workorder-card-header {
+    width: 100%;
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.workorder-card-table {
+    width: 100%;
+    font-size: 16px;
+    font-weight: 500;
+    border: 2px solid #000;
+    border-collapse: collapse;
+}
+
+.workorder-card-table td {
+    border: 2px solid #000;
+    padding: 5px;
+}
+
+.workorder-card-button-box {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.workorder-card-action-box {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.defect-item-left {
+    height: 100px;
+    font-size: 16px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-lr;
+}
+
+.defect-item-box {
+    min-width: 100%;
+    border-radius: 5%;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    background-color: #11a983;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    /* 添加过渡效果 */
+}
+
+.defect-item-box:hover {
+    background-color: #008c62;
+    /* 悬停时的背景颜色 */
+    transform: scale(1.05);
+    /* 悬停时稍微放大 */
+    cursor: pointer;
+    /* 改变鼠标指针形状 */
+}
+
+.defect-item-name {
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    writing-mode: vertical-lr;
+    letter-spacing: 5px;
+}
+
+.defect-item-number {
+    color: red;
+    width: 100%;
+    height: 40px;
+    font-size: 20px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.number-text {
+    font-size: 20px;
+    font-weight: 600;
+}
+</style>
diff --git a/src/views/qualityManagement/gp12/touchScreen/workorder/index.vue b/src/views/qualityManagement/gp12/touchScreen/workorder/index.vue
index 35a7ae6..96ba9f4 100644
--- a/src/views/qualityManagement/gp12/touchScreen/workorder/index.vue
+++ b/src/views/qualityManagement/gp12/touchScreen/workorder/index.vue
@@ -1,314 +1,30 @@
 <template>
     <div ref="container" class="container">
-        <el-row :gutter="10">
-            <el-col :span="8" v-for="(group, index) in groups" :key="index">
-                <el-card shadow="hover" class="box-card">
-                    <div class="card-header">
-                        {{ group.groupName }}
-                    </div>
-                    <div>
-                        <el-row :gutter="5" v-for="row, rowIndex in rowList" :key="rowIndex">
-                            <el-col :span="2">
-                                <div class="defect-item-left">{{ row }}</div>
-                            </el-col>
-                            <el-col v-if="item.type === row" :span="3" v-for="(item, index) in group.children"
-                                :key="index">
-                                <div class="defect-item-box" @mousedown="handleStart($event, item)"
-                                    @mouseup="handleEnd($event, item)" @touchstart="handleStart($event, item)"
-                                    @touchend="handleEnd($event, item)">
-                                    <div class="defect-item-name">{{ item.name }}</div>
-                                    <div class="defect-item-number">{{ getClickItemNum(item) }}</div>
-                                </div>
-                            </el-col>
-                        </el-row>
-                    </div>
-                </el-card>
-            </el-col>
-            <el-col :span="8">
-                <el-card class="workorder-card">
-                    <div class="workorder-card-header">
-                        <div>
-                            <span>工单编号:</span>
-                            <span>{{ formData.workOrder }}</span>
-                        </div>
-                        <div>
-                            <span :class="messageClass">{{ message }}</span>
-                        </div>
-                    </div>
-                    <div class="workorder-card-button-box">
-                        <div>
-                            <el-button type="primary" @click="doRefresh">刷新</el-button>
-                        </div>
-                        <div>
-                            <el-button v-if="formStatus === 1" type="success"
-                                @click="doBtnStartWorkOrder">开始工单</el-button>
-                            <el-button v-if="formStatus === 2" type="warning"
-                                @click="doBtnEndWorkOrder">结束工单</el-button>
-                        </div>
-                    </div>
-                    <div class="workorder-card-action-box">
-                        <div>
-                            <span>站点: </span>
-                            <el-select style="width: 140px;" v-model="site" placeholder="请选择站点" @change="selectChange">
-                                <el-option v-for="item in siteOptions" :key="item.code" :label="item.name"
-                                    :value="item.code">
-                                </el-option>
-                            </el-select>
-                        </div>
-
-                        <div>
-                            <span>班组: </span>
-                            <el-select style="width: 140px;" v-model="team" placeholder="请选择班组" @change="selectChange">
-                                <el-option v-for="item in teamOptions" :key="item.code" :label="item.name"
-                                    :value="item.code">
-                                </el-option>
-                            </el-select>
-                        </div>
-                    </div>
-                    <table v-if="formData.workOrder" class="workorder-card-table">
-                        <tr>
-                            <td>零件号</td>
-                            <td>{{ formData.partNumber }}</td>
-                            <td>描述</td>
-                            <td>{{ formData.description }}</td>
-                            <!-- <td :colspan="3">GEN12鲨鱼鳍</td> -->
-                        </tr>
-                        <tr>
-                            <td>规格</td>
-                            <td>{{ formData.specification }}</td>
-                            <td>颜色</td>
-                            <td>{{ formData.color }}</td>
-                        </tr>
-                        <tr>
-                            <td>来源</td>
-                            <td>{{ formData.isOnetime === 1 ? "一次合格" : "抛光件" }}</td>
-                            <td>类别</td>
-                            <td>{{ formData.isBack === 1 ? "返工件" : "正常件" }}</td>
-                        </tr>
-                        <tr>
-                            <td>投入数</td>
-                            <td>{{ formData.requireNumber }}</td>
-                            <td>合格数</td>
-                            <td>{{ formData.qualifiedNumber }}</td>
-                        </tr>
-                        <tr>
-                            <td>合格率</td>
-                            <td>{{ qualifiedRate }}</td>
-                            <td>抛光数</td>
-                            <td>{{ formData.polishNumber }}</td>
-                        </tr>
-                        <tr>
-                            <td>打磨数</td>
-                            <td>{{ formData.damoNumber }}</td>
-                            <td>报废数</td>
-                            <td>{{ formData.baofeiNumber }}</td>
-                        </tr>
-                        <tr>
-                            <td>开始时间</td>
-                            <td>{{ formData.startTime }}</td>
-                            <td>结束时间</td>
-                            <td>{{ formData.endTime }}</td>
-                        </tr>
-                    </table>
-                </el-card>
-            </el-col>
-        </el-row>
-        <!-- 修改缺陷项 -->
-        <el-dialog class="dialogBox" :visible="updateDialogShow" title="缺陷项修改" width="400px" append-to-body
-            :close-on-click-modal="false">
-            <el-form label-width="auto">
-                <el-form-item label="工单号">
-                    <div class="number-text">{{ formData.workOrder }}</div>
-                </el-form-item>
-                <el-form-item label="缺陷项">
-                    <div class="number-text">{{ updateName }}</div>
-                </el-form-item>
-                <el-form-item label="缺陷数">
-                    <el-input-number :min="0" class="number-text" v-model="updateNum"></el-input-number>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button @click="updateDialogShow = false">取消</el-button>
-                    <el-button type="primary" @click="updateDefectNum"> 确认修改 </el-button>
-                </div>
+        <DefectCard ref="DefectCardRef" :formData="formData" @refresh="doRefresh"
+            @showWarningMessage="showWarningMessage">
+            <template v-slot:workorder>
+                <WorkOrderCard ref="WorkOrderCardRef" @formDataChange="formDataChange" @refresh="doRefresh"
+                    :message="message" :messageClass="messageClass" @showWarningMessage="showWarningMessage"
+                    @clear="clear" />
             </template>
-        </el-dialog>
-        <!-- 开始工单 -->
-        <el-dialog v-loading="startWorkOrderDialog.loading" :visible.sync="startWorkOrderDialog.show"
-            :title="startWorkOrderDialog.title" width="600px" append-to-body :close-on-click-modal="false">
-            <el-form label-width="auto">
-                <el-form-item label="零件号">
-                    <div class="number-text">{{ startWorkOrderDialog.partnumber }}</div>
-                </el-form-item>
-                <el-form-item label="规格">
-                    <div class="number-text">{{ startWorkOrderDialog.specification }}</div>
-                </el-form-item>
-                <el-form-item label="颜色">
-                    <div class="number-text">{{ startWorkOrderDialog.color }}</div>
-                </el-form-item>
-                <el-form-item label="描述">
-                    <div class="number-text">{{ startWorkOrderDialog.description }}</div>
-                </el-form-item>
-                <el-form-item label="零件数">
-                    <div class="number-text">{{ startWorkOrderDialog.number }}</div>
-                </el-form-item>
-                <el-form-item label="标签内容">
-                    <div class="number-text">{{ startWorkOrderDialog.labelCode }}</div>
-                </el-form-item>
-                <div v-if="startWorkOrderDialog.partnumber">
-                    <el-row>
-                        <el-col :span="8">
-                            <el-form-item label="是否抛光件">
-                                <el-switch v-model="startWorkOrderDialog.isPolish" :active-value="1"
-                                    :inactive-value="0">
-                                </el-switch>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="是否返工件">
-                                <el-switch v-model="startWorkOrderDialog.isBack" :active-value="1" :inactive-value="0">
-                                </el-switch>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form-item label="标记">
-                                <el-switch v-model="startWorkOrderDialog.isOut" :active-value="1" :inactive-value="0">
-                                </el-switch>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                </div>
-            </el-form>
-            <scanInput @scanInput="handleScanBoxOutLabel"></scanInput>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button @click="closeStartWorkOrderDialog">取消</el-button>
-                    <el-button :disabled="startWorkOrderDialog.loading" type="primary" @click="startWorkOrder"> 确认开始工单
-                    </el-button>
-                </div>
-            </template>
-        </el-dialog>
-        <!-- 结束工单 -->
-        <el-dialog v-loading="endWorkOrderDialog.loading" :visible.sync="endWorkOrderDialog.show"
-            :title="endWorkOrderDialog.title" width="90%" append-to-body :close-on-click-modal="false">
-            <el-form label-width="auto">
-                <el-row :gutter="20">
-                    <el-col :span="6">
-                        <el-form-item label="工单号">
-                            <div class="number-text">{{ formData.workOrder }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="零件号">
-                            <div class="number-text">{{ formData.partNumber }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="规格">
-                            <div class="number-text">{{ formData.specification }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="颜色">
-                            <div class="number-text">{{ formData.color }}</div>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row :gutter="20">
-                    <el-col :span="6">
-                        <el-form-item label="描述">
-                            <div class="number-text">{{ formData.description }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="3">
-                        <el-form-item label="站点">
-                            <div class="number-text">{{ site }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="3">
-                        <el-form-item label="班组">
-                            <div class="number-text">{{ team }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="来源">
-                            <div class="number-text">{{ formData.isOnetime === 1 ? "一次合格" : "抛光件" }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="类别">
-                            <div class="number-text">{{ formData.isBack === 1 ? "返工件" : "正常件" }}</div>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <table class="workorder-card-table">
-                    <tr>
-                        <td>投入数</td>
-                        <td>{{ formData.requireNumber }}</td>
-                        <td>合格数</td>
-                        <td>{{ formData.qualifiedNumber }}</td>
-                        <td>合格率</td>
-                        <td>{{ qualifiedRate }}</td>
-                    </tr>
-                    <tr>
-                        <td>抛光数</td>
-                        <td>{{ formData.polishNumber }}</td>
-                        <td>打磨数</td>
-                        <td>{{ formData.damoNumber }}</td>
-                        <td>报废数</td>
-                        <td>{{ formData.baofeiNumber }}</td>
-                    </tr>
-                    <tr>
-                        <td>开始时间</td>
-                        <td>{{ formData.startTime }}</td>
-                        <td>结束时间</td>
-                        <td>{{ formData.endTime }}</td>
-                        <td>工单状态</td>
-                        <td>{{ formData.endTime ? "已结束" : "未结束" }}</td>
-                    </tr>
-                </table>
-            </el-form>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button @click="closeEndWorkOrderDialog">取消</el-button>
-                    <el-button :disabled="endWorkOrderDialog.loading" type="primary" @click="endWorkOrder()">
-                        确认结束工单并生成报表
-                    </el-button>
-                </div>
-            </template>
-        </el-dialog>
+        </DefectCard>
     </div>
 </template>
 
 <script>
+import WorkOrderCard from './components/WorkOrderCard.vue';
+import DefectCard from './components/DefectCard.vue';
+import StartWorkOrderDialog from './components/StartWorkOrderDialog.vue';
+import EndWorkOrderDialog from './components/EndWorkOrderDialog.vue';
 import * as emqxUtil from '@/utils/mqtt/emqxUtil';
 import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
-import scanInput from '../components/scanInput.vue';
 export default {
     name: 'WorkOrder',
-    components: { scanInput },
+    components: { WorkOrderCard, DefectCard, StartWorkOrderDialog, EndWorkOrderDialog },
     data() {
         return {
             mqttClient: null,
             mqttClientId: emqxUtil.title + 'GP12' + Math.random().toString(16).substring(1, 10),
-            sessionKey: '_touchScreenA01',
-            groups: [
-                { groupName: '油漆', children: [] },
-                { groupName: '设备', children: [] },
-                { groupName: '毛坯', children: [] },
-                { groupName: '程序', children: [] },
-                { groupName: '班组操作', children: [] }
-            ],
-            rowList: ['抛光', '打磨', '报废'],
-            // 缺陷数据
-            defectList: [],
-            teamOptions: [],
-            siteOptions: [],
-            // 站点工单执行状态 1-初始状态（扫外箱标签） 2-工单执行中（扫内标签）
-            formStatus: 1,
-            team: '',
-            site: '',
             formData: {
                 workOrder: '',
                 partnumber: '',
@@ -322,308 +38,78 @@ export default {
             },
             messageClass: 'text-green',
             message: '正常',
-            // 按钮
-            isLongPress: false,
-            pressTimer: null,
-            updateDialogShow: false,
-            updateName: '',
-            updateCode: '',
-            updateNum: 0,
-            // 开始工单弹框
-            startWorkOrderDialog: {
-                show: false,
-                loading: false,
-                title: '开始工单',
-                partnumber: '',
-                specification: '',
-                color: '',
-                description: '',
-                number: '',
-                labelCode: '',
-                siteNo: '',
-                comNo: '',
-                isOnetime: 0,
-                isBack: 0,
-                isPolish: 0,
-                isOut: 0,
-            },
-            // 结束工单弹框
-            endWorkOrderDialog: {
-                show: false,
-                loading: false,
-                title: '结束工单',
-                partnumber: '',
-                specification: '',
-                color: '',
-                description: '',
-                number: '',
-                labelCode: '',
-                siteNo: '',
-                comNo: '',
-                isOnetime: 0,
-                isBack: 0,
-                isPolish: 0,
-                isOut: 0,
-            }
         };
     },
-    computed: {
-        // 20250103 TODO 投入数，合格数，合格率，抛光数，打磨数，报废数 计算
-        qualifiedRate() {
-            console.log('requireNumber:', this.formData.requireNumber);
-            console.log('qualifiedNumber:', this.formData.qualifiedNumber);
-
-            if (this.formData.requireNumber > 0) {
-                const rate = Math.floor((this.formData.qualifiedNumber / this.formData.requireNumber) * 100);
-                return `${rate}%`;
-            } else {
-                return "0%";
-            }
-        }
-    },
     created() {
         this.init();
     },
     mounted() {
-        this.doMounted();
+
     },
     beforeDestroy() {
-        this.dobeforeDestroy();
+        this.doBeforeDestroy()
     },
     methods: {
-        async init() {
-            // 初始化数据
-            let teams = await QcGp12Api.GetGroupOptions()
-            let sites = await QcGp12Api.GetStieOptions()
-            let groups = await QcGp12Api.GetDefectInitOptions()
-            this.teamOptions = teams.data
-            this.siteOptions = sites.data
-            this.groups = groups.data
-            // 缓存数据读取
-            this.getLocalStorage()
-            this.initMqtt()
-        },
-        selectChange() {
-            this.setLocalStorage()
-        },
-        setLocalStorage() {
-            const data = {
-                team: this.team,
-                site: this.site
+        // 公共验证工单号【方案】
+        validateWorkOrder() {
+            if (!this.formData.workOrder) {
+                this.showWarningMessage('未生成有效工单,请扫描箱标签');
+                return false;
             }
-            localStorage.setItem(this.sessionKey, JSON.stringify(data));
+            return true;
         },
-        getLocalStorage() {
-            const data = JSON.parse(localStorage.getItem(this.sessionKey));
-            if (data) {
-                this.team = data.team
-                this.site = data.site
-            }
-        },
-        doMounted() {
-            const options = { passive: true };
-            this.$refs.container.addEventListener('touchmove', this.handleTouchMove, options);
-        },
-        dobeforeDestroy() {
-            this.$refs.container.removeEventListener('touchmove', this.handleTouchMove);
-            this.closeWriter();
-            this.closeReader();
-            if (this.serialPort && this.serialPort.readable) {
-                this.serialPort.close();
-            }
-            emqxUtil.endClient(this.mqttClient);
-        },
-        handleTouchMove(event) {
-            // 处理 touchmove 事件（如果需要）
-        },
-        async doRefresh() {
-            await this.init()
-            this.getDefectListByWorkOrder()
-        },
-        clearFormData() {
-            this.formData = {
-                workOrder: '',
-                partnumber: '',
-                specification: '',
-                color: '',
-                description: '',
-                isOnetime: 0,
-                isBack: 0,
-                isPolish: 0,
-                isOut: 0,
-            }
-        },
-        // 更新工单数据
-        updateFormData() {
-            const params = {
-                workOrder: this.formData.workOrder
-            }
-            if (params.workOrder === '' || params.workOrder === null) {
+        // 提取显示警告信息的逻辑
+        showWarningMessage(code, message) {
+            if (code === 0) {
+                this.message = '正常';
+                this.messageClass = 'text-green';
                 return;
             }
-            QcGp12Api.UpdateWorkOrderDetail(params).then(res => {
-                if (res.code === 200) {
-                    this.formData = res.data
-                }
-            })
+            this.$confirm(message, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                center: true,
+                closeOnClickModal: false
+            }).catch((err) => { });
+            if (code === 1) {
+                this.message = '未扫描箱标签!';
+                this.messageClass = 'text-red';
+            }
+            if (code === 2) {
+                this.message = '标签为空!';
+                this.messageClass = 'text-red';
+            }
+            if (code === 3) {
+                this.message = '标签存在异常!';
+                this.messageClass = 'text-red';
+            }
+            else {
+                this.message = '未定义错误!';
+                this.messageClass = 'text-red';
+            }
+        },
+        async init() {
+            this.initMqtt()
+        },
+        clear() {
+            this.$refs.DefectCardRef.init();
+        },
+        doBeforeDestroy() {
+            emqxUtil.endClient(this.mqttClient);
+        },
+        formDataChange(data) {
+            this.formData = data
+            this.$refs.DefectCardRef.getDefectListByWorkOrder()
+        },
+        // 全局刷新
+        async doRefresh() {
+            this.$refs.DefectCardRef.getDefectListByWorkOrder()
+            this.$refs.WorkOrderCardRef.updateFormData()
         },
         handlerScanInput(value) {
             this.handleAnalyzeLabel(value)
         },
-        // 工单开始按钮
-        doBtnStartWorkOrder() {
-            this.clearAddFormData()
-            this.startWorkOrderDialog.show = true
-        },
-        // 扫外箱标签的情况
-        handleScanBoxOutLabel(label = '', comNo = '未知串口') {
-            const params = {
-                label,
-                // type === 1 获取详细物料信息 2只判断零件号是否正确
-                type: 1
-            }
-            QcGp12Api.AnalyzeLabel(params).then(res => {
-                if (res.code === 200 && res.data.isOk) {
-                    this.message = '正常';
-                    this.messageClass = 'text-green';
-                    this.startWorkOrderDialog.partnumber = res.data.partnumber;
-                    this.startWorkOrderDialog.specification = res.data.specification;
-                    this.startWorkOrderDialog.color = res.data.color;
-                    this.startWorkOrderDialog.number = res.data.number;
-                    this.startWorkOrderDialog.description = res.data.description;
-                    this.startWorkOrderDialog.labelCode = res.data.labelCode;
-                    this.startWorkOrderDialog.comNo = comNo;
-                } else {
-                    this.$confirm('标签异常:' + res.data.msg, '提示', {
-                        confirmButtonText: '确定',
-                        cancelButtonText: '取消',
-                        type: 'warning',
-                        center: true
-                    }).then(() => {
-                    }).catch(() => {
-                    });
-                    this.message = '标签存在异常';
-                    this.messageClass = 'text-red';
-                }
-            })
-        },
-        // 确认开始工单
-        startWorkOrder() {
-            const params = {
-                partNumber: this.startWorkOrderDialog.partnumber,
-                description: this.startWorkOrderDialog.description,
-                specification: this.startWorkOrderDialog.specification,
-                color: this.startWorkOrderDialog.color,
-                team: this.team,
-                siteNo: this.site,
-                comNo: this.startWorkOrderDialog.comNo,
-                isOnetime: this.startWorkOrderDialog.isPolish === 0 ? 1 : 0,
-                isBack: this.startWorkOrderDialog.isBack,
-                isPolish: this.startWorkOrderDialog.isPolish,
-                isOut: this.startWorkOrderDialog.isOut,
-                label: this.startWorkOrderDialog.labelCode,
-            }
-            if (params.partNumber === '' || params.label === '') {
-                this.$confirm('未扫描正确箱标签', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                    center: true
-                }).then(() => {
-                }).catch(() => {
-                });
-                return;
-            }
-            this.startWorkOrderDialog.loading = true
-            // 开始工单
-            QcGp12Api.StartGP12WorkOrder(params).then(res => {
-                if (res.code == 200) {
-                    this.$message.success("开始工单成功！");
-                    this.formData = res.data
-                    // 进入内标签扫码模式
-                    this.formStatus = 2
-                    this.getDefectListByWorkOrder()
-                    this.closeStartWorkOrderDialog()
-                    this.startWorkOrderDialog.loading = false
-                } else {
-                    this.$message.error("开始工单异常！");
-                    this.closeStartWorkOrderDialog()
-                    this.startWorkOrderDialog.loading = false
-                }
-            });
-        },
-        clearAddFormData() {
-            this.startWorkOrderDialog.loading = false;
-            this.startWorkOrderDialog.partnumber = '';
-            this.startWorkOrderDialog.specification = '';
-            this.startWorkOrderDialog.color = '';
-            this.startWorkOrderDialog.number = '';
-            this.startWorkOrderDialog.description = '';
-            this.startWorkOrderDialog.labelCode = '';
-            this.startWorkOrderDialog.isOnetime = 0;
-            this.startWorkOrderDialog.isPolish = 0;
-            this.startWorkOrderDialog.isBack = 0;
-            this.startWorkOrderDialog.isOut = 0;
-        },
-        closeStartWorkOrderDialog() {
-            this.startWorkOrderDialog.show = false
-            this.clearAddFormData()
-        },
-        closeEndWorkOrderDialog() {
-            this.endWorkOrderDialog.show = false
-            this.endWorkOrderDialog.loading = false;
-        },
-        // 扫内标签的情况
-        handleScanInnerLabel(label = '', comNo = "未知串口") {
-            console.log(label, comNo);
-            const params = {
-                workOrder: this.formData.workOrder,
-                partNumber: this.formData.partNumber,
-                team: this.team,
-                siteNo: this.site,
-                comNo: comNo,
-                labelType: 2,
-                label,
-            }
-            QcGp12Api.ScanInnerLabel(params).then(res => {
-                if (res.code === 200 && res.data === "ok") {
-                    this.message = '正常';
-                    this.messageClass = 'text-green';
-                    this.updateFormData()
-                } else {
-                    this.$message.error("扫描内标签异常！" + res.data);
-                    this.message = res.data;
-                    this.messageClass = 'text-red';
-                }
-            });
-        },
-        // 工单结束按钮
-        doBtnEndWorkOrder() {
-            this.endWorkOrderDialog.show = true
-            // this.formStatus = 1
-        },
-        endWorkOrder() {
-            this.$confirm('是否确认完成工单并生成报表!', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'info',
-                center: true
-            }).then(() => {
-                QcGp12Api.EndGP12WorkOrderAndCreateStatistics(this.formData).then(res => {
-                    if (res.code === 200 && res.data === "ok") {
-                        this.$message.success("结束工单并生成报表成功！");
-                        this.clearFormData();
-                        this.init()
-                        this.formStatus = 1
-                        this.endWorkOrderDialog.show = false
-                    } else {
-                        this.$message.error("结束工单异常！" + res.msg);
-                    }
-                });
-            }).catch(() => {
-            });
-        },
-
         handleAnalyzeLabel(label = '') {
             const params = {
                 label,
@@ -648,192 +134,17 @@ export default {
                 }
             })
         },
-        handleStart(event, item) {
-            // 如果是触摸事件，阻止其默认行为（如滚动）
-            if (event.type.startsWith('touch')) event.preventDefault();
-            // 清除之前的定时器
-            if (this.pressTimer) clearTimeout(this.pressTimer);
-            // 设置新的定时器，用于判断长按
-            this.pressTimer = setTimeout(() => {
-                this.isLongPress = true;
-                //console.log('长按');
-                // 这里执行长按的逻辑
-                this.showUpdateDialog(item);
-            }, 500); // 长按的阈值设为500毫秒
-        },
-        handleEnd(event, item = null) {
-            if (!item) return;
-            // 清除定时器
-            if (this.pressTimer) clearTimeout(this.pressTimer);
-            // 这里执行短按或长按结束的逻辑
-            this.clickQualityIte(item);
-            this.isLongPress = false;
-        },
-        clickQualityIte(item) {
-            // 长按则跳过
-            if (this.isLongPress) {
-                return;
-            }
-            //console.log('短按');
-            const workOrder = this.formData.workOrder;
-            if (workOrder === null || workOrder === '') {
-                this.$confirm('未生成有效工单,请扫描箱标签', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                    center: true
-                }).then(() => {
-                }).catch(() => {
-                });
-                this.message = '未扫描箱标签';
-                this.messageClass = 'text-red';
-                return;
-            }
-            const params = {
-                workOrder: this.formData.workOrder,
-                defectCode: item.code,
-                defectNum: item.num || 0,
-                // 1-短按 2-长按
-                type: "1",
-            };
-
-            QcGp12Api.ChangeWorkOrderDefect(params).then(res => {
-                if (res.code === 200) {
-                    // const newNum = this.getClickItemNum(item) + 1;
-                    //this.$set(item, 'num', newNum);
-                    this.getDefectListByWorkOrder()
-                    this.updateFormData()
-                } else {
-                    this.$message.error('缺陷项点击异常');
-                }
-            })
-        },
-        showUpdateDialog(item) {
-            const workOrder = this.formData.workOrder;
-            if (workOrder === null || workOrder === '') {
-                this.$confirm('未生成有效工单,请扫描箱标签', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                    center: true
-                }).then(() => {
-                }).catch(() => {
-                });
-                this.message = '未扫描箱标签';
-                this.messageClass = 'text-red';
-                return;
-            }
-            this.updateName = item.type + '-' + item.name;
-            this.updateCode = item.code;
-            this.updateNum = this.getClickItemNum(item);
-            this.updateDialogShow = true;
-
-        },
-        updateDefectNum() {
-            const workOrder = this.formData.workOrder;
-            if (workOrder === null || workOrder === '') {
-                this.$confirm('未生成有效工单,请扫描箱标签', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                    center: true
-                }).then(() => {
-                }).catch(() => {
-                });
-                this.message = '未扫描箱标签';
-                this.messageClass = 'text-red';
-                return;
-            }
-            const params = {
-                workOrder: this.formData.workOrder,
-                defectCode: this.updateCode,
-                defectNum: this.updateNum || 0,
-                // 1-短按 2-长按
-                type: "2",
-            };
-            QcGp12Api.ChangeWorkOrderDefect(params).then(res => {
-                if (res.code === 200) {
-                    this.getDefectListByWorkOrder()
-                    this.updateFormData()
-                    this.updateDialogShow = false;
-                    this.isLongPress = false;
-                } else {
-                    this.$message.error('缺陷项点击异常');
-                }
-            })
-        },
-        getClickItemNum(item) {
-            if (!item.num) {
-                return 0;
-            }
-            return parseInt(item.num, 0);
-        },
-        setDefectNum(defectCode, num) {
-            // 更新缺陷数量的方法
-            for (let group of this.groups) {
-                for (let child of group.children) {
-                    if (child.code === defectCode) {
-                        child.num = num;
-                        break;
-                    }
-                }
-            }
-        },
-        // 获取工单缺陷项(刷新)
-        getDefectListByWorkOrder() {
-            const params = {
-                workOrder: this.formData.workOrder,
-            };
-            if (params.workOrder == null || params.workOrder == '') {
-                return;
-            }
-            QcGp12Api.GetWorkOrderDefectList(params).then(res => {
-                if (res.code === 200 && res.data.length > 0) {
-                    let _list = res.data;
-                    for (let item of _list) {
-                        this.setDefectNum(item.defectCode, item.defectNum);
-                    }
-                }
-            })
-        },
-        closeWriter() {
-            if (this.writer) {
-                try {
-                    this.writer.releaseLock();
-                    this.writer = null;
-                } catch (error) {
-                    console.error('Error releasing writer lock:', error);
-                }
-            }
-        },
-        closeReader() {
-            if (this.reader) {
-                try {
-                    this.reader.cancel();
-                    this.reader = null;
-                } catch (error) {
-                    console.error('Error canceling reader:', error);
-                }
-            }
-        },
         // mqtt 操作
         initMqtt() {
             const that = this;
-            if (that.mqttClient !== null && that.mqttClient.connected) {
-                // 已建立连接
-                return;
-            }
-            // 需要传输或订阅的内容
+            if (this.mqttClient?.connected) return
             const _topic = emqxUtil.GP12Topic;
             that.mqttClient = emqxUtil.createClient(that.mqttClientId);
-            // 订阅所有值变动
             that.mqttClient.subscribe(_topic.SiteComLabelCode + '/#');
             that.mqttClient.on('message', function (topic, message) {
                 if (topic === _topic.SiteComLabelCode) {
                     const objData = emqxUtil.parseJSON(message);
-                    if (objData && objData.SiteNo === that.site) {
-                        that.doMqttAction(objData)
-                    }
+                    that.doMqttAction(objData)
                 }
             })
         },
@@ -841,160 +152,16 @@ export default {
         doMqttAction(objData) {
             const { SiteNo, ComNo, LabelCode, Time } = objData;
             if (!LabelCode) {
-                this.$message.error("标签为空!");
-                return;
-            }
-            const params = {
-                label: LabelCode,
-                // 1 获取详细物料信息 2只判断零件号是否正确
-                type: 1
-            }
-            // 解析结果
-            if (this.formStatus === 1 && this.startWorkOrderDialog.show) {
-                // 扫外箱标签模式
-                this.handleScanBoxOutLabel(LabelCode, ComNo)
-                return;
-            }
-            // 扫内标签模式
-            if (this.formStatus === 2) {
-                // 扫内标签模式
-                this.handleScanInnerLabel(LabelCode, ComNo)
+                this.showWarningMessage(2, "扫描结果为空!");
                 return;
             }
+
+
+            this.$refs.WorkOrderCardRef.setMqttMessage(LabelCode, ComNo, SiteNo)
         },
+
     }
 };
 </script>
 
-<style scoped>
-.box-card {
-    width: 100%;
-    background-color: #032169;
-    /* 深墨绿色背景 */
-    color: #ecf0f1;
-    /* 浅灰色文字颜色 */
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    /* 设置阴影 */
-    margin-top: 2px;
-    margin-bottom: 2px;
-    /* 增加卡片底部间距 */
-}
-
-.card-header {
-    color: #ecf0f1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    font-weight: 600;
-}
-
-.workorder-card {
-    min-height: 400px;
-}
-
-
-.workorder-card-header {
-    width: 100%;
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.workorder-card-table {
-    width: 100%;
-    font-size: 16px;
-    font-weight: 500;
-    border: 2px solid #000;
-    border-collapse: collapse;
-}
-
-.workorder-card-table td {
-    border: 2px solid #000;
-    padding: 5px;
-}
-
-.workorder-card-button-box {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 10px;
-}
-
-.workorder-card-action-box {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    font-size: 16px;
-    font-weight: 600;
-}
-
-.defect-item-left {
-    height: 100px;
-    font-size: 16px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    writing-mode: vertical-lr;
-}
-
-.defect-item-box {
-    min-width: 100%;
-    border-radius: 5%;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    background-color: #11a983;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.3s ease, transform 0.3s ease;
-    /* 添加过渡效果 */
-}
-
-.defect-item-box:hover {
-    background-color: #008c62;
-    /* 悬停时的背景颜色 */
-    transform: scale(1.05);
-    /* 悬停时稍微放大 */
-    cursor: pointer;
-    /* 改变鼠标指针形状 */
-}
-
-.defect-item-name {
-    width: 100%;
-    height: 60px;
-    font-size: 16px;
-    font-weight: 600;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    writing-mode: vertical-lr;
-    letter-spacing: 5px;
-}
-
-.defect-item-number {
-    color: red;
-    width: 100%;
-    height: 40px;
-    font-size: 20px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.number-text {
-    font-size: 20px;
-    font-weight: 600;
-}
-</style>
+<style scoped></style>