diff --git a/src/api/qualityManagement/gp12/qcGp12Service.js b/src/api/qualityManagement/gp12/qcGp12Service.js
new file mode 100644
index 0000000..6916485
--- /dev/null
+++ b/src/api/qualityManagement/gp12/qcGp12Service.js
@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+/**
+ * 获取班组下拉
+ * @param {查询条件} data
+ */
+export function GetGroupOptions(query) {
+  return request({
+    url: '/mes/qc/gp12/QcGp12Controller/GetGroupOptions',
+    method: 'get',
+    params: query,
+  })
+}
+/**
+ * 获取站点下拉
+ * @param {查询条件} data
+ */
+export function GetStieOptions(query) {
+  return request({
+    url: '/mes/qc/gp12/QcGp12Controller/GetStieOptions',
+    method: 'get',
+    params: query,
+  })
+}
+/**
+ * 获取缺陷项初始化数据
+ * @param {查询条件} data
+ */
+export function GetDefectInitOptions(query) {
+  return request({
+    url: '/mes/qc/gp12/QcGp12Controller/GetDefectInitOptions',
+    method: 'get',
+    params: query,
+  })
+}
+
+/**
+ * 解析标签
+ * @param {查询条件} data
+ */
+export function AnalyzeLabel(query) {
+  return request({
+    url: '/mes/qc/gp12/QcGp12Controller/AnalyzeLabel',
+    method: 'get',
+    params: query,
+  })
+}
diff --git a/src/views/qualityManagement/gp12/touchScreen/components/scanInput.vue b/src/views/qualityManagement/gp12/touchScreen/components/scanInput.vue
new file mode 100644
index 0000000..cdb5af5
--- /dev/null
+++ b/src/views/qualityManagement/gp12/touchScreen/components/scanInput.vue
@@ -0,0 +1,96 @@
+<template>
+    <div class="scanInput">
+        <input ref="inputRef" :type="passwordShow ? 'text' : 'password'" autofocus placeholder="请扫码" v-model="input"
+            @keydown="handleKeyPress" />
+        <!-- <button @click="togglePasswordVisibility">
+            <span>{{ passwordIcon }}</span>
+        </button> -->
+        <button class="bg-blue-darken-1 ml-2" size="x-large" @click="doInputChange(input)">
+            扫码
+        </button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            input: '',
+            passwordShow: false,
+            timer: null
+        };
+    },
+    computed: {
+        passwordIcon() {
+            return this.passwordShow ? '👁️‍🗨️' : '🔑';
+        }
+    },
+    mounted() {
+        this.autoInputFocus();
+        this.timer = setInterval(() => {
+            // datetime.value = this.dayjs().format('YYYY-MM-DD HH:mm:ss')
+        }, 1000);
+    },
+    beforeDestroy() {
+        clearInterval(this.timer);
+    },
+    methods: {
+        autoInputFocus() {
+            if (this.$refs.inputRef) {
+                this.$nextTick(() => {
+                    this.$refs.inputRef.focus();
+                });
+            }
+        },
+        handleKeyPress(event) {
+            if (event.key === 'Enter') {
+                this.doInputChange(this.input);
+            }
+        },
+        togglePasswordVisibility() {
+            this.passwordShow = !this.passwordShow;
+        },
+        doInputChange(value) {
+            const _value = value.trim();
+            if (_value === '') {
+                this.autoInputFocus();
+                return;
+            }
+            this.input = '';
+            this.$emit('scanInput', _value);
+        }
+    }
+};
+</script>
+
+<style scoped>
+.scanInput {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+input {
+    width: 100%;
+    padding: 10px;
+    margin-right: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    width: 60px;
+    padding: 10px 10px;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    background-color: #1e88e5;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #1976d2;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/qualityManagement/gp12/touchScreen/workorder/index.vue b/src/views/qualityManagement/gp12/touchScreen/workorder/index.vue
index 2129d5a..88db6b2 100644
--- a/src/views/qualityManagement/gp12/touchScreen/workorder/index.vue
+++ b/src/views/qualityManagement/gp12/touchScreen/workorder/index.vue
@@ -4,27 +4,20 @@
             <el-col :span="8" v-for="(group, index) in groups" :key="index">
                 <el-card shadow="hover" class="box-card">
                     <div class="card-header">
-                        {{ group.title }}
+                        {{ group.groupName }}
                     </div>
                     <div>
-                        <el-row :gutter="20">
-                            <el-col :span="3" v-for="(item, index) in 8" :key="index">
-                                <div class="defect-item-box">
-
-                                </div>
+                        <el-row :gutter="10" v-for="row, rowIndex in rowList" :key="rowIndex">
+                            <el-col :span="3">
+                                <div class="defect-item-left">{{ row }}</div>
                             </el-col>
-                        </el-row>
-                        <el-row :gutter="20">
-                            <el-col :span="3" v-for="(item, index) in 8" :key="index">
-                                <div class="defect-item-box">
-
-                                </div>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="20">
-                            <el-col :span="3" v-for="(item, index) in 8" :key="index">
-                                <div class="defect-item-box">
-
+                            <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(item)" @touchstart="handleStart($event, item)"
+                                    @touchend="handleEnd(item)">
+                                    <div class="defect-item-name">{{ item.name }}</div>
+                                    <div class="defect-item-number">{{ getClickItemNum(item) }}</div>
                                 </div>
                             </el-col>
                         </el-row>
@@ -39,28 +32,31 @@
                             <span>{{ formData.workOrder }}</span>
                         </div>
                         <div>
-                            <span class="text-green">正常</span>
+                            <span :class="messageClass">{{ message }}</span>
                         </div>
                     </div>
                     <div class="workorder-card-button-box">
-                        <el-button type="primary">刷新数据</el-button>
+                        <el-button type="primary" @click="doRefresh">刷新数据</el-button>
                         <el-button type="success">开始工单</el-button>
                     </div>
+                    <div>
+                        <scanInput @scanInput="handlerScanInput"></scanInput>
+                    </div>
                     <table class="workorder-card-table">
                         <tr>
                             <td>班组</td>
                             <td>
                                 <el-select v-model="formData.team" placeholder="请选择班组">
-                                    <el-option v-for="item in teamOptions" :key="item.value" :label="item.label"
-                                        :value="item.value">
+                                    <el-option v-for="item in teamOptions" :key="item.code" :label="item.name"
+                                        :value="item.code">
                                     </el-option>
                                 </el-select>
                             </td>
                             <td>站点</td>
                             <td>
                                 <el-select v-model="formData.site" placeholder="请选择站点">
-                                    <el-option v-for="item in siteOptions" :key="item.value" :label="item.label"
-                                        :value="item.value">
+                                    <el-option v-for="item in siteOptions" :key="item.code" :label="item.name"
+                                        :value="item.code">
                                     </el-option>
                                 </el-select>
                             </td>
@@ -106,41 +102,274 @@
                 </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 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>
     </div>
 </template>
 
 <script>
+import * as QcGp12Api from '@/api/qualityManagement/gp12/qcGp12Service';
+import scanInput from '../components/scanInput.vue';
 export default {
     name: 'WorkOrder',
+    components: { scanInput },
     data() {
         return {
             groups: [
-                { title: '油漆', description: '检查设备A' },
-                { title: '设备', description: '检查设备B' },
-                { title: '毛坯', description: '检查设备C' },
-                { title: '程序', description: '检查设备D' },
-                { title: '班组操作', description: '检查设备E' }
+                { groupName: '油漆', children: [] },
+                { groupName: '设备', children: [] },
+                { groupName: '毛坯', children: [] },
+                { groupName: '程序', children: [] },
+                { groupName: '班组操作', children: [] }
             ],
-            teamOptions: [
-                { label: 'A组', value: 'A组' },
-                { label: 'B组', value: 'B组' },
-                { label: 'C组', value: 'C组' },
-            ],
-            siteOptions: [
-                { label: '1站点', value: '1站点' },
-                { label: '2站点', value: '2站点' },
-                { label: '3站点', value: '3站点' },
+            rowList: ['抛光', '打磨', '报废'],
+            // 缺陷数据
+            defectList: [
+                {
+                    id: '11',
+                    defectCode: '111',
+                    defectNum: 5
+                },
+                {
+                    id: '22',
+                    defectCode: '111',
+                    defectNum: 5
+                }
             ],
+            teamOptions: [],
+            siteOptions: [],
             formData: {
+                // W20250102001
                 workOrder: 'W20250102001',
                 team: '',
-                site: ''
-            }
+                site: '',
+                specification: '',
+                color: '',
+                description: '',
+                isOnetime: false,
+                isBack: false,
+                isPolish: false,
+                isOut: false,
+            },
+            messageClass: 'text-green',
+            message: '正常',
+            // 按钮
+            isLongPress: false,
+            pressTimer: null,
+            updateDialogShow: false,
+            updateName: '',
+            updateCode: '',
+            updateNum: 0
         };
     },
+    computed: {
+        // 20250103 TODO 投入数，合格数，合格率，抛光数，打磨数，报废数 计算
+    },
+    created() {
+        this.init();
+    },
     methods: {
-        init() {
+        async init() {
             // 初始化方法
+            let team = await QcGp12Api.GetGroupOptions()
+            let site = await QcGp12Api.GetStieOptions()
+            let groups = await QcGp12Api.GetDefectInitOptions()
+            this.teamOptions = team.data
+            this.siteOptions = site.data
+            this.groups = groups.data
+        },
+        doRefresh() {
+            this.init()
+        },
+        handlerScanInput(value) {
+            this.handleAnalyzeLabel(value)
+        },
+        handleAnalyzeLabel(label = '') {
+            const params = {
+                label,
+                type: 1
+            }
+            QcGp12Api.AnalyzeLabel(params).then(res => {
+                console.log(res);
+                if (res.code === 200 && res.data.isOk) {
+                    this.message = '正常';
+                    this.messageClass = 'text-green';
+                } else {
+                    this.$confirm('标签异常', '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning',
+                        center: true
+                    }).then(() => {
+                    }).catch(() => {
+                    });
+                    this.message = '标签异常';
+                    this.messageClass = 'text-red';
+                }
+            })
+        },
+        handleClick(item) {
+            console.log('Clicked on:', item);
+            // 在这里可以添加点击事件的具体逻辑
+        },
+        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(item) {
+            // 清除定时器
+            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 newNum = this.getClickItemNum(item) + 1;
+            // const params = {
+            //     WorkOrder: this.formData.workOrder,
+            //     DefectCode: item.code,
+            //     num: item.num || 0,
+            //     checkName: this.checkName
+            // };
+            // FQCApi.AddDefectNum(params).then((res) => {
+            //     if (res.code !== 200) {
+            //         this.$message.error('添加缺陷项异常');
+            //         return;
+            //     }
+            // });
+            this.$set(item, 'num', newNum);
+        },
+        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,
+                num: this.updateNum,
+                checkName: this.checkName
+            };
+            this.setDefectNum(params.DefectCode, params.num);
+            this.updateDialogShow = false;
+            // FQCApi.UpdateDefectNum(params).then((res) => {
+            //     if (res.code === 200) {
+            //         this.$confirm('修改成功', '提示', {
+            //             type: 'success',
+            //             center: true
+            //         }).then(() => {
+            //         }).catch(() => {
+            //         });
+            //         this.message = '正常';
+            //         this.messageClass = 'text-green';
+            //         this.setDefectNum(params.DefectCode, params.num);
+            //         this.updateDialogShow = false;
+            //     } else {
+            //         this.$confirm('修改失败', '提示', {
+            //             type: 'error',
+            //             center: true
+            //         }).then(() => {
+            //         }).catch(() => {
+            //         });
+            //         this.message = '修改异常';
+            //         this.messageClass = 'text-red';
+            //         return;
+            //     }
+            // });
+        },
+        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;
+                    }
+                }
+            }
         }
     }
 };
@@ -167,11 +396,11 @@ export default {
 
 .card-header {
     color: #ecf0f1;
-    padding-bottom: 10px;
+
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
+    font-size: 28px;
     font-weight: 600;
 
 }
@@ -207,11 +436,62 @@ export default {
     margin-bottom: 10px;
 }
 
+.defect-item-left {
+    height: 120px;
+    font-size: 24px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .defect-item-box {
-    width: 100%;
-    min-height: 120px;
+    min-width: 100%;
+    border-radius: 5%;
     margin-top: 10px;
     margin-bottom: 10px;
     background-color: #016129;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    /* 添加过渡效果 */
 }
-</style>
\ No newline at end of file
+
+.defect-item-box:hover {
+    background-color: #00a876;
+    /* 悬停时的背景颜色 */
+    transform: scale(1.05);
+    /* 悬停时稍微放大 */
+    cursor: pointer;
+    /* 改变鼠标指针形状 */
+}
+
+.defect-item-name {
+    width: 100%;
+    height: 80px;
+    font-size: 22px;
+    font-weight: 600;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.defect-item-number {
+    color: red;
+    width: 100%;
+    height: 40px;
+    font-size: 28px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.number-text {
+    font-size: 28px;
+    font-weight: 600;
+}
+</style>