From f5298a1fca8e8c1bea7bb4818b94767cd763e6c0 Mon Sep 17 00:00:00 2001
From: andy <1042025947@qq.com>
Date: Wed, 15 Jul 2026 11:11:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts              |   6 +
 src/views/proterminal/circle.vue |  72 +++
 src/views/proterminal/index.vue  | 951 +++++++++++++++++++++++++++++++
 3 files changed, 1029 insertions(+)
 create mode 100644 src/views/proterminal/circle.vue
 create mode 100644 src/views/proterminal/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index b0a3f50..4da2bfa 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,6 +22,12 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/views/register/index.vue'),
     meta: { title: '注册', requiresAuth: false }
   },
+  {
+    path: '/proterminal',
+    name: 'proterminal',
+    component: () => import('@/views/proterminal/index.vue'),
+    meta: { title: '生产终端',requiresAuth: true } 
+  },
   {
     path: '/',
     name: 'Layout',
diff --git a/src/views/proterminal/circle.vue b/src/views/proterminal/circle.vue
new file mode 100644
index 0000000..70ccef4
--- /dev/null
+++ b/src/views/proterminal/circle.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="progress-container">
+        <svg viewBox="0 0 120 120">
+        <circle class="bg" cx="60" cy="60" r="54" fill="none" stroke-width="6" />
+        <circle ref="progress" class="progress" cx="60" cy="60" r="54" fill="none" stroke-width="6"
+                stroke-dasharray="339.292" stroke-dashoffset="339.292" />
+        </svg>
+        <span ref="label" class="label">0%</span>
+    </div>
+</template>
+<script setup lang="ts">
+    import {ref , onMounted } from 'vue'
+
+    const props = withDefaults(defineProps<{
+        percent:any
+    }>(), {
+        percent:0
+    })
+
+    //设置圆形
+    let progress = ref()
+
+    let label = ref()
+
+    function setProgress(percent:any) {
+        //圆形进度
+        const circle:any = progress.value //document.querySelector('.progress')
+        const labels:any =  label.value //document.getElementById('label')
+        const radius = 54
+        const circumference = 2 * Math.PI * radius
+
+        const clamped = Math.min(100, Math.max(0, percent))
+        const offset = circumference - (clamped / 100) * circumference
+        circle.style.strokeDashoffset = offset
+        labels.textContent = clamped + '%'
+    }
+
+    onMounted(() => {
+        setProgress(props.percent)
+    })
+
+</script>
+<style lang="scss" scoped>
+    .progress-container {
+    display: inline-block;
+    position: relative;
+    width: 90px;
+    height: 90px;
+  }
+  .progress-container svg {
+    transform: rotate(-90deg);
+    width: 100%;
+    height: 100%;
+  }
+  .progress-container .bg {
+    stroke: #e6e6e6;
+  }
+  .progress-container .progress {
+    stroke: #4caf50;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.6s ease;
+  }
+  .progress-container .label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 18px;
+    font-weight: bold;
+    color: #c5c5c5;
+  }
+</style>
diff --git a/src/views/proterminal/index.vue b/src/views/proterminal/index.vue
new file mode 100644
index 0000000..ec4010d
--- /dev/null
+++ b/src/views/proterminal/index.vue
@@ -0,0 +1,951 @@
+<template>
+  <div v-if="islogin" class="conten">
+    <!-- <template v-if="tablet">
+      平板
+    </template> -->
+    
+    <div class="head">
+        <div style="box-sizing: border-box;padding: 5px;">
+          <div class="mbx">
+            <div>钣金车间</div>
+            <n-icon :component="ArrowRedoOutline" size="20" />
+            <div>激光切割</div>
+            <n-icon :component="ArrowRedoOutline" size="20" />
+            <div>激光切割01</div>
+          </div>
+          <n-icon :component="BuildSharp" size="20" color="#ccc" />
+          
+          <div style="display: flex;align-items: center;padding-left: 10px;">
+            <img src="../../assets/images/qiyelogo.png" width="40" height="40" style="border-radius: 50%;" />
+            <div style="padding: 0 10px;">张三三</div>
+            <div style="padding: 2px 5px;border-radius: 5px;font-size: 12px;background: #bd6d07;">工段长</div>
+          </div>
+        </div>
+        
+        <div>
+          <n-button v-if="isfullscr" ghost style="margin-right: 20px;color: #fff;" @click="exitFullscreen">
+            <template #icon>
+              <n-icon>
+                <Contract />
+              </n-icon>
+            </template>
+              退出全屏
+          </n-button>
+          <n-button v-else ghost style="margin-right: 20px;color: #fff;" @click="requestFullscreen">
+            <template #icon>
+              <n-icon>
+                <Contract />
+              </n-icon>
+            </template>
+              全屏
+          </n-button>
+          <n-button ghost style="margin-right: 20px;color: #fff;">
+            <template #icon>
+              <n-icon>
+                <Sync />
+              </n-icon>
+            </template>
+            
+              刷新
+          </n-button>
+          <n-button ghost style="color: #fff;" @click="islogin = false">
+            <template #icon>
+              <n-icon>
+                <SwapHorizontalOutline />
+              </n-icon>
+            </template>
+            
+              切换工位
+          </n-button>
+        </div>
+      </div>
+      <div class="total">
+        <div>
+          <div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
+            <n-icon size="20">
+                <BarChartOutline />
+            </n-icon>
+            <div style="padding-left: 8px;">工单数</div>
+          </div>
+          <div style="font-size: 34px;line-height: 45px;color:#f3f3f3;">50</div>
+        </div>
+        <div>
+          <div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
+            <n-icon size="25">
+                <ShapesOutline />
+            </n-icon>
+            <div style="padding-left: 8px;">计划/已报</div>
+          </div>
+          <div style="font-size: 34px;line-height: 45px;color:#f3f3f3;">50/20</div>
+        </div>
+        <div>
+          <div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
+            <n-icon size="22">
+                <TimerSharp />
+            </n-icon>
+            <div style="padding-left: 8px;">合格数</div>
+          </div>
+          <div style="font-size: 34px;color: #bd6d07;line-height: 45px;color:#f3f3f3;">40</div>
+        </div>
+        <div>
+          <div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
+            <n-icon size="22">
+                <LogoWebComponent />
+            </n-icon>
+            <div style="padding-left: 8px;">不良品</div>
+          </div>
+          <div style="font-size: 34px;line-height: 45px;color:#f3f3f3;">10</div>
+        </div>
+        
+        <div>
+          <div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
+            <n-icon size="22">
+                <LayersOutline />
+            </n-icon>
+            <div style="padding-left: 8px;">合格率</div>
+          </div>
+          <div style="font-size: 34px;line-height: 45px;color:#f3f3f3;">80%</div>
+        </div>
+      </div>
+      <n-grid x-gap="20" style="padding: 20px;">
+        <n-gi :span="5" class="mocz">
+          <div style="display: flex;align-items: center;justify-content: space-between;padding:8px 12px;">
+            <div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
+              <n-icon size="22">
+                  <DiceOutline />
+              </n-icon>
+              <div style="padding-left: 8px;">工单列表</div>
+            </div>
+            <div style="font-size: 14px;color:#b7b7b7;">共 40 项</div>
+          </div>
+          <div style="padding: 20px;border: 2px dashed #afafaf;border-left: none;border-right: none;">
+            <n-grid x-gap="10">
+              <n-gi :span="10">
+                <n-select
+                  v-model:value="queryparam.type"
+                  :options="typeopt"
+                  remote
+                  @update:value=""
+                />
+              </n-gi>
+              <n-gi :span="14">
+                <n-input-group>
+                  <n-input :style="{ width: '100%' }" placeholder="请输入编号或产品" />
+                  <n-button style="color:#dfdfdf;">
+                    <template #icon>
+                      <n-icon size="22">
+                        <Search />
+                      </n-icon>
+                    </template>
+                  </n-button>
+                </n-input-group>
+              </n-gi>
+            </n-grid>  
+          </div>
+          <div style="height: 450px;padding: 20px;overflow-y: auto;">
+            <div v-for="n in 20" @click="getgd(n)" class="gditem" :class="{gdactv:gdindex == n}">
+              <div style="display: flex;align-items: center;justify-content: space-between;font-size: 24px;">
+                <div>GD123456789100{{ n }}</div>
+                <div style="margin-left: 10px;padding: 4px 10px;border-radius: 10px;font-size: 12px;background: #bd6d07;">生产中</div>
+              </div>
+              <div style="font-size: 16px;color: #b7b7b7;">内包含页单玻门无底柜</div>
+              <div style="color: #b7b7b7;">C128(500×600×800)AS</div>
+              <div style="color: #b7b7b7;">07-10 08:00 至 08-25 13:00</div>
+              <div style="display: flex;width: 100%;align-items: center;">
+                <div style="flex: 1;position: relative;margin-right: 10px;height: 6px;background: #afafaf;">
+                  <div style="position: absolute;width: 45%;height: 6px;background: #007f5b;"></div>
+                </div>
+                <div>45%</div>
+              </div>
+            </div>
+          </div>
+        </n-gi>
+        <n-gi :span="14" class="mocz" style="padding:5px 15px;">
+          <n-tabs
+           type="line"
+            tab-style="color: #ccc;"
+            default-value="gdcz"
+            size="large"
+            animated
+            pane-wrapper-style="margin: 0 -4px"
+            pane-style="color:#fff;padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+          >
+            <n-tab-pane name="gdcz">
+              <template #tab>
+                <n-icon size="22">
+                  <PrismSharp />
+                </n-icon>
+                <div style="padding-left: 4px;">工单操作</div>
+              </template>
+              <div style="padding: 15px;border: 2px solid #186170;border-radius: 10px;background: #244962;">
+                <div style="color: #ccc;">正在执行</div>
+                <div style="display: flex;align-items: center;padding-bottom: 10px;">
+                  <div style="font-size: 30px;">GB123456789001</div>
+                  <div style="padding: 2px 6px;border-radius: 8px;background: #896024;">内包含页单玻门无底柜 C128(500×600×800)AS</div>
+                </div>
+                <div style="display: flex;align-items: center;overflow-x: auto;">
+                  <div @click="gxtab(1)" :class="{gonxactv:gonxindex == 1}" style="box-sizing: border-box;width: 120px;padding: 10px 0;text-align: center;">
+                    <!-- <div style="position: relative;width: 80px;height: 80px;margin: 0 auto;border:4px solid #ccc;border-radius: 50%;">
+                      <div style="position: absolute;width: 80px;height: 80px;border:4px solid #007f5b;border-radius: 50%;">80%</div>
+                    </div> -->
+                    <!-- <div class="progress-container">
+                      <svg viewBox="0 0 120 120">
+                        <circle class="bg" cx="60" cy="60" r="54" fill="none" stroke-width="6" />
+                        <circle class="progress" cx="60" cy="60" r="54" fill="none" stroke-width="6"
+                                stroke-dasharray="339.292" stroke-dashoffset="339.292" />
+                      </svg>
+                      <span class="label" id="label">0%</span>
+                    </div> -->
+                    <circlebom :percent="100" />
+                    <div>饮水机外壳加工</div>
+                  </div>
+                  <div @click="gxtab(2)" :class="{gonxactv:gonxindex == 2}" style="width: 120px;padding: 10px 0;text-align: center;">
+                    <!-- <div style="position: relative;width: 80px;height: 80px;margin: 0 auto;border:4px solid #ccc;border-radius: 50%;">
+                      <div style="position: absolute;width: 80px;height: 80px;border:4px solid #007f5b;border-radius: 50%;">80%</div>
+                    </div> -->
+                    <circlebom :percent="20" />
+                    <div>进检</div>
+                  </div>
+                  <div @click="gxtab(3)" :class="{gonxactv:gonxindex == 3}" style="width: 120px;padding: 10px 0;text-align: center;">
+                    <!-- <div style="position: relative;width: 80px;height: 80px;margin: 0 auto;border:4px solid #ccc;border-radius: 50%;">
+                      <div style="position: absolute;width: 80px;height: 80px;border:4px solid #007f5b;border-radius: 50%;">80%</div>
+                    </div> -->
+                    <div class="progress-container">
+                      <svg viewBox="0 0 120 120">
+                        <circle class="bg" cx="60" cy="60" r="54" fill="none" stroke-width="6" />
+                        <circle class="progress" cx="60" cy="60" r="54" fill="none" stroke-width="6"
+                                stroke-dasharray="339.292" stroke-dashoffset="339.292" />
+                      </svg>
+                      <span class="label" id="label">0%</span>
+                    </div>
+                    <div>进检</div>
+                  </div>
+                </div>
+                <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 15px;padding: 20px;border: 1px solid #ccc;border-radius: 10px;">
+                  <div style="display: flex;align-items: center;">
+                    <!-- <div style="display: flex;align-items: center;">
+                      <div style="padding: 2px 4px;font-size: 18px;color:#b7b7b7;border: 1px solid #ccc;">工序名称</div>
+                      <div style="padding: 2px 4px;font-size: 20px;background: #ccc;color: #1e2a40;">拆解</div>
+                    </div> -->
+                    <div style="display: flex;align-items: center;">
+                      <div style="padding: 2px 4px;font-size: 18px;color:#b7b7b7;border: 1px solid #ccc;">状态</div>
+                      <div style="padding: 2px 4px;font-size: 20px;background: #ccc;color: #1e2a40;">待执行</div>
+                    </div>
+                    <div style="display: flex;align-items: center;margin-left: 30px;">
+                      <div style="padding: 2px 4px;font-size: 18px;color:#b7b7b7;border: 1px solid #ccc;">完成进度</div>
+                      <div style="padding: 2px 4px;font-size: 20px;background: #ccc;color: #1e2a40;">30%</div>
+                    </div>
+                    <div style="display: flex;align-items: center;margin-left: 30px;">
+                      <div style="padding: 2px 4px;font-size: 18px;color:#b7b7b7;border: 1px solid #ccc;">质检</div>
+                      <div style="padding: 2px 4px;font-size: 20px;background: #ccc;color: #1e2a40;">15</div>
+                    </div>
+                  </div>
+                  <div>
+                    <n-button 
+                      ghost 
+                      style="margin-right: 20px;color: #fff;" 
+                      size="large"
+                      @click="guizds"
+                    >
+                      <template #icon>
+                        <n-icon>
+                          <DocumentTextOutline />
+                        </n-icon>
+                      </template>
+                        作业指导书
+                    </n-button>
+                    <n-button ghost style="margin-right: 20px;color: #fff;" size="large">
+                      <template #icon>
+                        <n-icon>
+                          <PricetagsOutline />
+                        </n-icon>
+                      </template>
+                        报工参数
+                    </n-button>
+                    <n-button ghost style="color: #fff;" size="large">
+                      <template #icon>
+                        <n-icon>
+                          <ScanCircleOutline />
+                        </n-icon>
+                      </template>
+                        工序检验
+                    </n-button>
+                  </div>
+                  </div>
+                  <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 15px;padding: 20px;border: 1px solid #ccc;border-radius: 10px;">
+                    <n-form
+                      ref="baogformRef"
+                      :model="baogdata"
+                      :rules="baogrules"
+                      label-placement="left"
+                      label-width="auto"
+                      :inline="true"
+                      size="large"
+                      :style="{
+                        marginTop:'20px'
+                      }"
+                    >
+                      <n-form-item label="合格数" label-style="color:#fff;">
+                         <n-input v-model:value="baogdata.qualified" placeholder="请输入合格数" />
+                      </n-form-item>
+                      <n-form-item label="不合格数" label-style="color:#fff;">
+                         <n-input v-model:value="baogdata.unqualified" placeholder="请输入不合格数" />
+                      </n-form-item>
+                      <n-form-item label="总数" label-style="color:#fff;">
+                         <n-input v-model:value="baogdata.total" disabled placeholder="" />
+                      </n-form-item>
+                      <n-button 
+                        type="success" 
+                        size="large"
+                        @click="confireport"
+                      >
+                        确认报工
+                      </n-button>
+                    </n-form>
+                  </div>
+                </div>
+                
+            </n-tab-pane>
+            <n-tab-pane name="wend">
+              <template #tab>
+                <n-icon size="22">
+                  <ReaderSharp />
+                </n-icon>
+                <div style="padding-left: 4px;">文档</div>
+              </template>
+              
+              <n-tabs
+                type="bar"
+                  tab-style="color: #ccc;"
+                  default-value="zyzds"
+                  size="large"
+                  animated
+                  pane-wrapper-style="margin: 0 -4px"
+                  pane-style="color:#fff;padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+              >
+                <n-tab-pane name="zyzds" tab="作业指导书">
+                  <!-- <template #tab>
+                    <n-icon size="22">
+                      <Planet />
+                    </n-icon>
+                    <div style="padding-left: 4px;">在制品跟踪</div>
+                  </template> -->
+                  作业指导书
+                </n-tab-pane>
+                <n-tab-pane name="tuzhi" tab="图纸">
+                  <div style="display: flex;width:100%;height: 450px;flex-wrap: wrap;overflow-y: auto;">
+                    <div v-for="n in 4" style="margin: 0 7px 15px;">
+                      <n-image
+                        src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" width="160" height="180px" style="border-radius: 10px 10px 0 0;" 
+                      />
+                      <!-- <img src="../../assets/images/qiyelogo.png" width="160" height="180px" style="border-radius: 10px 10px 0 0;" /> -->
+                      <div style="width: 160px;height: 40px;margin-top: -8px;line-height: 40px;border-radius: 0 0 10px 10px;text-align: center;background: #186170;">机械图纸.png</div>
+                    </div>
+
+                    <!-- <n-image-group show-toolbar-tooltip>
+                      <n-space>
+                        <n-image
+                          width="100"
+                          src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                        />
+                        <n-image
+                          width="100"
+                          src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+                        />
+                      </n-space>
+                    </n-image-group> -->
+
+                  </div>
+                  
+                </n-tab-pane>
+                <n-tab-pane name="code" tab="代码">
+                  <!-- <template #tab>
+                    <n-icon size="22">
+                      <Planet />
+                    </n-icon>
+                    <div style="padding-left: 4px;">在制品跟踪</div>
+                  </template> -->
+                  代码
+                </n-tab-pane>
+            </n-tabs>
+            </n-tab-pane>
+            <n-tab-pane name="zzpgz" tab="在制品跟踪">
+              <template #tab>
+                <n-icon size="22">
+                  <Planet />
+                </n-icon>
+                <div style="padding-left: 4px;">在制品跟踪</div>
+              </template>
+              在制品跟踪
+            </n-tab-pane>
+          </n-tabs>
+        </n-gi>
+        <n-gi :span="5" class="mocz">
+          <div style="display: flex;align-items: center;justify-content: space-between;padding:8px 12px;border-bottom: 2px dashed #afafaf;">
+            <div style="display: flex;align-items: center;font-size: 18px;color:#dfdfdf;">
+              <n-icon size="22">
+                  <HourglassOutline />
+              </n-icon>
+              <div style="padding-left: 8px;">操作记录</div>
+            </div>
+            <!-- <div style="font-size: 14px;color:#b7b7b7;">共 40 项</div> -->
+          </div>
+          <div style="height: 520px;padding:20px;overflow-y: auto;">
+            <div v-for="n in 10" style="margin-bottom: 18px;padding: 12px;border:1px solid #afafaf;border-radius:10px;background:#2d475c;">
+              <div style="display: flex;align-items: center;justify-content: space-between;font-size: 16px;">
+                <div>张三三</div>
+                <div>2026-06-28 14:50:30</div>
+              </div>
+              <div style="font-size: 20px;">暂停</div>
+            </div>
+          </div>
+          
+        </n-gi>
+      </n-grid>
+      <div style="display: flex;align-items: center;justify-content: center;">
+        <div class="mybtn">
+          <n-icon size="28">
+              <Power />
+          </n-icon>
+          <div>开始</div>
+        </div>
+        <div class="mybtn" style="margin-left: 20px;background: #1e2a40;border: 1px solid #afafaf;">
+          <n-icon size="32">
+              <StopCircleOutline />
+          </n-icon>
+          <div>暂停</div>
+        </div>
+        <!-- <n-button ghost size="large" style="color: #fff;">
+          <template #icon size="100">
+            <n-icon>
+              <Contract />
+            </n-icon>
+          </template>
+            开始
+        </n-button>
+        <n-button ghost style="margin-right: 20px;color: #fff;">
+          <template #icon>
+            <n-icon>
+              <Sync />
+            </n-icon>
+          </template>
+            暂停
+        </n-button> -->
+      </div>
+  </div>
+  <div v-else class="conten">
+    <div class="head">
+        <div style="box-sizing: border-box;padding: 5px;">
+          <!-- <n-icon :component="BuildSharp" size="20" color="#ccc" /> -->
+          
+          <div style="display: flex;align-items: center;padding-left: 10px;">
+            <n-icon :component="PersonOutline" size="25" color="#ccc" />
+            <div style="padding: 0 10px;">未登录</div>
+          </div>
+        </div>
+        
+        <div>
+          <n-button v-if="isfullscr" ghost style="margin-right: 20px;color: #fff;" @click="exitFullscreen">
+            <template #icon>
+              <n-icon>
+                <Contract />
+              </n-icon>
+            </template>
+              退出全屏
+          </n-button>
+          <n-button v-else ghost style="margin-right: 20px;color: #fff;" @click="requestFullscreen">
+            <template #icon>
+              <n-icon>
+                <Contract />
+              </n-icon>
+            </template>
+              全屏
+          </n-button>
+        </div>
+      </div>
+      <div style="position: absolute;top: 50%;left: 50%;width: 400px;height: 580px;padding: 20px;transform: translate(-50%,-50%);border-radius: 20px;border: 1px #b7b7b7 solid;background: #1e2a40;">
+        <div style="width: 100%;padding:10px 20px;text-align: center;">
+          <!-- <img src="../../assets/logo/logo1.png" width="110" height="50" /> -->
+          <n-icon size="40" color="#00a2ff">
+            <EarthOutline />
+          </n-icon>
+          <div>
+            <div style="font-size: 21px;">请绑定当前终端所属工位</div>
+            <div style="font-size: 12px;color: #b7b7b7;">绑定后，终端将自动显示该工位的生产任务</div>
+          </div>
+        </div>
+
+        <n-form
+          ref="loginformRef"
+          :model="logindata"
+          :rules="loginrules"
+          label-placement="top"
+          label-width="auto"
+          size="large"
+          :style="{
+            marginTop:'20px'
+          }"
+        >
+          <n-form-item label="所属车间" label-style="color:#fff;" path="workshop">
+            <n-select
+              v-model:value="logindata.workshop"
+              remote
+              placeholder="请选择车间"
+              :options="workshoplist"
+            />
+          </n-form-item>
+          <n-form-item label="所属工段" label-style="color:#fff;" path="section">
+            <n-select
+              :disabled="logindata.workshop?false:true"
+              v-model:value="logindata.section"
+              placeholder="请选择工段"
+              :options="workshoplist"
+            />
+          </n-form-item>
+          <n-form-item label="所属工位" label-style="color:#fff;" path="workstation">
+            <n-select
+              :disabled="logindata.section?false:true"
+              v-model:value="logindata.workstation"
+              placeholder="请选择工位"
+              :options="workshoplist"
+            />
+          </n-form-item>
+          <n-button 
+            :disabled="logindata.workstation?false:true"
+            type="info" 
+            style="width: 100%;margin-top: 20px;" 
+            size="large"
+            @click="loginhand"
+          >
+            确 认 绑 定
+          </n-button>
+        </n-form>
+      </div>
+  </div>
+
+  <!--作业指导书-->
+  <n-modal
+      v-model:show="guidanpop"
+      title="作业指导书"
+      preset="card"
+      style="width: 500px"
+      :mask-closable="false"
+    >
+      <div style="min-height: 400px;">作业指导书</div>
+      <!-- <template #footer>
+        <n-space justify="end">
+          <n-button @click="guidanpop = false">取消</n-button>
+        </n-space>
+      </template> -->
+    </n-modal>
+</template>
+
+<script setup lang="ts">
+import { 
+  ref, 
+  reactive, 
+  h, 
+  onMounted,
+  render,
+  watch, 
+} from 'vue'
+
+
+import { 
+  NButton, 
+  NDropdown,
+  NIcon, 
+  NSpace, 
+  NPagination, 
+  NGrid, 
+  NGi, 
+  NTag,
+  useMessage,
+  //useDialog,
+  type FormInst, 
+} from 'naive-ui'
+import {
+  PrismOutline,
+  ArrowRedoSharp,
+  ArrowRedoOutline,
+  BuildSharp,
+  Contract,
+  Sync,
+  SwapHorizontalOutline,
+  BarChartOutline,
+  LayersOutline,
+  DiceOutline,
+  Search,
+  PrismSharp,
+  ReaderSharp,
+  Planet,
+  PersonOutline,
+  EarthOutline,
+  DocumentTextOutline,
+  PricetagsOutline,
+  ScanCircleOutline,
+  HourglassOutline,
+  Power,
+  StopCircleOutline,
+  ShapesOutline,
+  LogoWebComponent,
+  TimerSharp
+} from '@vicons/ionicons5'
+
+import Circlebom from './circle.vue'
+
+import { useUserStore } from '@/stores/user'
+import { dictDataApi } from '@/api/org'
+import { 
+  disworlist,
+  editdiswor, 
+  transfer, 
+  pauseresume,
+  //workload 
+} from '@/api/production'
+
+import { submitLogApi } from '@/api/submitLog'
+
+import { SysUser, userApi } from '@/api/system'
+import { label } from 'three/tsl'
+
+//const dialog = useDialog()
+
+//是否平板
+let tablet = ref(false)
+
+
+//全屏
+let isfullscr = ref(false)
+
+//浏览器全屏
+function requestFullscreen() {
+    document.documentElement.requestFullscreen()
+    isfullscr.value = true
+}
+
+//退出全屏
+function exitFullscreen() {
+  document.exitFullscreen()
+  isfullscr.value = false
+}
+
+const message = useMessage()
+
+const userStore = useUserStore()
+
+
+let queryparam = reactive<any>({
+  type:1,
+  id:''
+})
+
+const typeopt = reactive<any>([
+  {
+    label: '全部',
+    value: 1
+  },
+  {
+    label: '只看本机台',
+    value: 2
+  },
+  {
+    label: '只看当前用户',
+    value: 3
+  }
+])
+
+//报工
+let baogformRef = ref() 
+let baogdata = reactive<any>({
+  qualified:'',      //合格数
+  unqualified:'',    //不合格数
+  total:''            //总数
+})
+let baogrules = {
+  qualified: [
+    {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入合格数'
+    }
+  ],
+  unqualified:[
+    {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入不合格数'
+    }
+  ]
+}
+
+watch(() => baogdata.qualified,(v:any) => {
+  baogdata.qualified = v.replace(/[^\d]/g,'').replace(/^0+(?=\d)/, '')
+  baogdata.total = baogdata.qualified*1 + baogdata.unqualified*1
+})
+watch(() => baogdata.unqualified,(v:any) => {
+  baogdata.unqualified = v.replace(/[^\d]/g,'').replace(/^0+(?=\d)/, '')
+  baogdata.total = baogdata.qualified*1 + baogdata.unqualified*1
+})
+
+//确认报工
+function confireport() {
+
+  baogformRef.value?.validate((e:any) => {
+    if (!e) {
+      message.success('操作成功')
+    }
+  })
+}
+
+
+//工单切换
+let gdindex = ref<any>(0)
+
+function getgd(i:any){
+  gdindex.value = i
+}
+
+//工序切换
+let gonxindex = ref<any>(0)
+function gxtab(i:any) {
+  gonxindex.value = i
+}
+
+//作业指导书
+let guidanpop = ref(false)
+
+function guizds() {
+  guidanpop.value = true
+}
+
+//登录
+let islogin = ref(false)
+
+let logindata = reactive({
+  workshop:'',      //所属车间
+  section:'',       //所属工段
+  workstation:''    //所属工位
+})
+let loginrules = {
+  // workshop: [
+  //   {
+  //     required: true,
+  //     trigger: ['blur', 'input'],
+  //     message: '请选择所属车间'
+  //   }
+  // ],
+  // section: [
+  //   {
+  //     required: true,
+  //     trigger: ['blur', 'input'],
+  //     message: '请选择所属工段'
+  //   }
+  // ],
+  // workstation: [
+  //   {
+  //     required: true,
+  //     trigger: ['blur', 'input'],
+  //     message: '请选择所属工位'
+  //   }
+  // ]
+} 
+const loginformRef =ref()
+
+let workshoplist = [
+  {
+    label:'一车间',
+    value:'1'
+  },
+  {
+    label:'二车间',
+    value:'2'
+  },
+  {
+    label:'三车间',
+    value:'3'
+  }
+]
+
+function loginhand() {
+
+  loginformRef.value?.validate((e:any) => {
+    if (!e) {
+      message.success('绑定成功')
+      islogin.value = true
+    }
+  })
+}
+
+
+onMounted(() => {
+ 
+//  getlist()
+//  getUserList()
+//  loadDictOptions()
+ //workload() 
+
+
+
+// 初始显示 0%
+//setProgress(50)
+
+window.addEventListener('resize', () => {
+  const width = window.innerWidth
+    if(width < 1024){
+      tablet.value = true
+    }else{
+      tablet.value = false
+    }
+    // if (width < 768) {
+    //   console.log('手机模式')
+    // } else if (width < 1024) {
+    //   console.log('平板模式')
+    // } else {
+    //   console.log('桌面模式')
+    // }
+})
+
+//监听是否全屏 fullscreenchange
+ window.addEventListener('resize', () => {
+  if(window.innerHeight === screen.height){
+    isfullscr.value = true
+  }else{
+    isfullscr.value = false
+  }
+ })
+
+})
+</script>
+
+<style scoped>
+ /deep/.n-base-selection .n-base-selection__border, .n-base-selection .n-base-selection__state-border{
+    /* background-color:#1b3752; */
+    border:1px solid #817e7e;
+    /* color: #fff; */
+  }
+</style>
+
+<style scoped lang="scss">
+
+  .conten{
+    /* width: 100vw; */
+    height: 100vh;
+    
+    color: #fff;
+    background: linear-gradient(45deg, #010b1a 0%, #45679b 100%);
+    .head{
+      display: flex;
+      height: 70px;
+      padding-right:10px;
+      justify-content: space-between;
+      background:#041b3f; //linear-gradient(0deg, #31558f 0%, #152d52 100%);
+      >div{
+        display: flex;
+        align-items: center;
+        .mbx{
+          display: flex;
+          align-items: center;
+          font-size: 18px;
+          >div{
+            //margin-right: 20px;
+            padding:5px 10px;
+            //border: 1px dashed #ccc;
+            
+            //background: #2c4970;
+          }
+        }
+      }
+    }
+    .total{
+      padding: 20px;
+      display: flex;
+      justify-content:space-between;
+      >div{
+        box-sizing: border-box;
+        width: 19%;
+        height: 100px;
+        padding:10px 15px;
+         border: 4px double #d4d4d4;
+        // border: 4px solid;
+        // border-image: linear-gradient(
+        //   135deg, 
+        //   #f0f0f0, 
+        //   #8a8a8a, 
+        //   #595959, 
+        //   #b6b4b4
+        // ) 1;
+        border-radius: 10px;
+      }
+    }
+    .mocz{
+      width: 100%;
+      height: 600px;
+      //border-radius: 30px;
+      border: 3px solid;
+      border-image: linear-gradient(
+        135deg, 
+        #d3d2d2, 
+        #8a8a8a, 
+        #868686, 
+        #b6b4b4
+      ) 1;
+      .gditem{
+        box-sizing: border-box;
+        width: 100%;
+        margin-bottom: 15px;
+        padding: 10px;
+        background: #2d475c;
+        border-radius: 10px;
+      }
+      .gdactv{
+        background: #0c5207;
+      }
+      // box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);
+    }
+    .gonxactv{
+      border: 2px solid #d18610;border-radius: 10px;
+    }
+    .mybtn{
+      box-sizing:border-box;
+      display: flex;
+      width: 120px;
+      height: 60px;
+      align-items: center;
+      justify-content: center;
+      line-height: 60px;
+      border-radius: 10px;
+      font-size: 20px;
+      background: #007f5b;
+      cursor: pointer;
+    }
+  }
+  .progress-container {
+    display: inline-block;
+    position: relative;
+    width: 90px;
+    height: 90px;
+  }
+  .progress-container svg {
+    transform: rotate(-90deg);
+    width: 100%;
+    height: 100%;
+  }
+  .progress-container .bg {
+    stroke: #e6e6e6;
+  }
+  .progress-container .progress {
+    stroke: #4caf50;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.6s ease;
+  }
+  .progress-container .label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 18px;
+    font-weight: bold;
+    color: #c5c5c5;
+  }
+</style>