样式调整11

tjx

2025-11-06 5d8a861c7895d3ed75d3b110723000bd3db878ed

样式调整11

 AGENTS.md

@@ -1,36 +1,19 @@
# Repository Guidelines

## Project Structure & Module Organization
- `pages/` hosts the multi-tab MES screens; treat each subdirectory as a self-contained feature view.
- `components/` collects reusable modules such as `WorkOrder.vue`, `PrintInit.vue`, and Bluetooth helpers—prefer extending these before creating new ones.
- `common/` exposes global mixins and permission utilities loaded in `main.js`; align new cross-cutting logic here.
- `utils/` provides device integrations (Bluetooth, printing, scanning). Reuse these helpers instead of duplicating platform calls.
- `store/index.js` defines runtime server endpoints; keep environment toggles (`serverInfo`) in sync with deployment plans.
- `static/` and `unpackage/` store shared assets and build outputs—never edit generated files in `unpackage/`.
`pages/` hosts the multi-tab MES screens—treat each subdirectory as an isolated feature. Shared UI and device helpers live in `components/`, `common/`, and `utils/`; extend these before adding new modules so tablet flows stay consistent. Global state and server toggles sit in `store/index.js`; adjust `serverURL`, `serverAPI`, `pdaMac`, and `machineNo` here before packaging. Keep generated build assets in `unpackage/` untouched, and store documentation under `docs/`.

## Build, Test, and Development Commands
- Day-to-day development: open the project in HBuilderX â†’ `Run > Run to Mobile Device` for live debugging on an Android tablet.
- Packaging: HBuilderX â†’ `Build > Native App-Cloud Packaging` (select `App-Plus`).
- CLI fallback: `npx @dcloudio/uni-cli-service dev -p app-plus` for local preview, `npx @dcloudio/uni-cli-service build -p app-plus` for production bundles.
- Update API targets by editing `store/index.js` (`serverURL`, `serverAPI`) before each build.
Primary workflow uses HBuilderX: `Run > Run to Mobile Device` for live debugging, `Build > Native App-Cloud Packaging` targeting `App-Plus`. CLI fallback commands: `npx @dcloudio/uni-cli-service dev -p app-plus` for local preview and `npx @dcloudio/uni-cli-service build -p app-plus` for production bundles. Run these from the repo root with UTF-8 terminals to avoid encoding drift.

## Coding Style & Naming Conventions
- Vue 2 single-file components with `<template>`, `<script>`, `<style lang="scss">`; keep component names in PascalCase.
- Use tabs (width 4) to mirror existing templates and scripts; SCSS files prefer two-space indentation.
- Follow camelCase for data keys and methods, UPPER_SNAKE_CASE only for immutable constants.
- Keep inline comments concise and in Chinese when matching existing context.
Components follow Vue 2 SFC format with tab (width 4) indentation in `<template>`/`<script>` and two spaces in SCSS. Name components in PascalCase, data/methods in camelCase, and reserve UPPER_SNAKE_CASE for constants. All files must be UTF-8 encoded; inline comments should stay concise and in Chinese to match existing context. Prefer reusing mixins/utilities from `common/` and `utils/` instead of reimplementing device logic.

## Testing Guidelines
- No automated test suite is tracked; document manual verification covering work-order flow, barcode printing, and Bluetooth pairing.
- Validate builds on actual industrial tablets (1280×800 or 1920×1080) via HBuilderX device preview.
- Capture console output (`HBuilderX > Debug > View Log`) when reporting regressions.
No automated suite exists; document manual verification covering work-order flow, barcode printing, Bluetooth pairing, and tablet layouts (1280×800, 1920×1080). Capture logs via `HBuilderX > Debug > View Log` when issues appear, and note the API environment configured in `store/index.js`.

## Commit & Pull Request Guidelines
- Git history shows terse messages (`1111`, `优化`); prefer descriptive imperative titles such as `feat: improve WorkOrder polling`.
- Group related changes per commit and reference affected modules (`components/WorkOrder.vue`).
- Pull requests should list environment used, manual test steps, and screenshots for UI adjustments; link tracker items when available.
Write descriptive imperative commit subjects (e.g., `feat: improve WorkOrder polling`) instead of legacy numeric messages. Each PR should state the device/environment used, list manual test steps, and attach screenshots for UI tweaks. Reference affected modules (`components/WorkOrder.vue`) and link tracker items when possible; keep unrelated changes out of scope.

## Configuration & Security Notes
- Never hard-code credentials; rely on `uni.getStorageSync` and backend-issued tokens.
- Reset device bindings (`pdaMac`, `machineNo`) in `store/index.js` before shipping shared builds.
- Clean `unpackage/` artifacts prior to committing to avoid bloating the repository.
## Security & Configuration Tips
Never hard-code credentials; fetch tokens via `uni.getStorageSync`. Reset device bindings and API targets before distributing shared builds, and clean `unpackage/` artifacts prior to committing to keep the repo lean.

 common/styles/components.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,210 @@
@import './design-tokens.scss';
@import './mixins.scss';

.top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-md $spacing-lg;
  background: rgba(11, 26, 44, 0.92);
  backdrop-filter: blur(12px);
  border-radius: $radius-lg;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: $shadow-elevated;
  color: $color-text-invert;

  &__title {
    font-size: $font-size-xl;
    font-weight: 600;
    letter-spacing: $letter-spacing-wide;
  }

  &__actions {
    display: inline-flex;
    gap: $spacing-sm;
  }
}

.btn {
  min-width: $btn-min-width;
  height: $control-height-md;
  border-radius: $radius-md;
  border: none;
  padding: 0 $spacing-lg;
  font-size: $font-size-sm;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  @include smooth-font;

  &:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
}

.btn--primary {
  background: linear-gradient(135deg, $color-primary 0%, $color-primary-dark 100%);
  color: $color-text-invert;

  &:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(15, 34, 58, 0.45);
  }

  &:focus-visible {
    @include focus-ring;
  }
}

.btn--secondary {
  background-color: rgba(27, 127, 233, 0.12);
  color: $color-accent;
  border: 1px solid rgba(27, 127, 233, 0.4);

  &:hover:not(:disabled) {
    background-color: rgba(27, 127, 233, 0.2);
  }
}

.btn--text {
  min-width: auto;
  padding: 0 $spacing-sm;
  background: transparent;
  color: $color-text-invert;
}

.info-card {
  @extend .content-panel;
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;
  border-left: 4px solid $color-primary;

  &__title {
    font-size: $font-size-sm;
    color: $color-text-muted;
  }

  &__value {
    font-size: 2.2vw;
    line-height: 1.2;
    font-weight: 700;
    color: $color-primary;

    @include respond(compact) {
      font-size: 32px;
    }
  }

  &__meta {
    font-size: $font-size-xs;
    color: $color-text-secondary;
  }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: $spacing-xxs;
  padding: 0 $spacing-sm;
  height: 26px;
  border-radius: 999px;
  font-size: $font-size-xs;
  font-weight: 600;
  text-transform: uppercase;

  &::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }
}

.status-pill--success {
  background-color: rgba($color-success, 0.15);
  color: $color-success;
}

.status-pill--warning {
  background-color: rgba($color-warning, 0.15);
  color: $color-warning;
}

.status-pill--danger {
  background-color: rgba($color-danger, 0.15);
  color: $color-danger;
}

.table {
  width: 100%;
  border-spacing: 0;
  font-size: $font-size-sm;

  &__head {
    text-transform: uppercase;
    font-size: $font-size-xs;
    color: $color-text-secondary;
    letter-spacing: 0.06em;
  }

  &__row {
    @include smooth-font;
    height: 56px;
    border-bottom: 1px solid rgba(11, 26, 44, 0.08);
    transition: background-color 0.2s ease;

    &:nth-child(odd) {
      background-color: rgba(245, 247, 250, 0.7);
    }

    &:hover {
      background-color: rgba(27, 127, 233, 0.08);
    }
  }

  &__cell {
    padding: 0 $spacing-md;
    color: $color-text-primary;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: $spacing-xxs;

  &__label {
    font-size: $font-size-xs;
    color: $color-text-secondary;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  &__control {
    height: $control-height-md;
    border-radius: $radius-md;
    border: 1px solid rgba(11, 26, 44, 0.25);
    background-color: $color-bg-panel;
    padding: 0 $spacing-md;
    font-size: $font-size-sm;
    color: $color-text-primary;
    transition: border-color 0.2s ease;

    &:focus {
      border-color: $color-accent;
      @include focus-ring;
    }
  }

  &__message {
    font-size: $font-size-xs;
    color: $color-danger;
  }
}

 common/styles/design-tokens.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,68 @@
/**
 * å·¥ä¸šé£Žæ ¼ä¸»é¢˜å˜é‡ï¼Œç»Ÿä¸€é¢œè‰²ã€å­—体与间距
 */
$color-primary: #1e3a5f;
$color-primary-dark: #0f223a;
$color-secondary: #2f4d6f;
$color-accent: #1b7fe9;
$color-success: #3aa776;
$color-warning: #d9852c;
$color-danger: #c65243;
$color-info: #4f6b86;
$color-surface: #0b1a2c;
$color-bg-base: #f5f7fa;
$color-bg-panel: #ffffff;
$color-bg-muted: #e5eaf2;
$color-border: #d5dbe6;
$color-border-strong: #8a97ad;
$color-text-primary: #1b2433;
$color-text-secondary: #4c5566;
$color-text-muted: #778197;
$color-text-invert: #ffffff;

/**
 * å­—体与排版
 */
$font-family-base: 'DIN Alternate', 'Roboto', 'Microsoft YaHei', sans-serif;
$font-size-xs: 12px;
$font-size-sm: 13px;
$font-size-base: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 22px;
$line-height-base: 1.4;
$letter-spacing-wide: 0.04em;

/**
 * é—´è·ä¸Žåœ†è§’
 */
$spacing-xxs: 4px;
$spacing-xs: 8px;
$spacing-sm: 12px;
$spacing-md: 16px;
$spacing-lg: 20px;
$spacing-xl: 28px;
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;

/**
 * é˜´å½±ä¸Žæè¾¹
 */
$shadow-card: 0 4px 18px rgba(15, 34, 58, 0.08);
$shadow-elevated: 0 10px 30px rgba(11, 26, 44, 0.2);
$border-base: 1px solid $color-border;

/**
 * å±å¹•æ–­ç‚¹
 */
$screen-compact: 1366px;
$screen-wide: 1760px;

/**
 * ç»„件尺寸
 */
$control-height-sm: 32px;
$control-height-md: 40px;
$control-height-lg: 48px;
$btn-min-width: 112px;

 common/styles/layout.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,86 @@
@import './design-tokens.scss';
@import './mixins.scss';

:root {
  font-size: 14px;
}

page {
  background-color: $color-bg-base;
  color: $color-text-primary;
  font-family: $font-family-base;
}

.page-container {
  width: 100%;
  min-height: 100vh;
  padding: $spacing-lg $spacing-xl;
  background: linear-gradient(180deg, #f8fafc 0%, #edf1f7 100%);
  @include smooth-font;

  @include respond(compact) {
    padding: $spacing-md;
  }
}

.page-scroll {
  @include scroll-y;
  padding-bottom: $spacing-xl;
}

.content-panel {
  background-color: $color-bg-panel;
  border-radius: $radius-lg;
  border: $border-base;
  box-shadow: $shadow-card;
  padding: $spacing-lg;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-lg;
}

$grid-columns: 12;
@for $i from 1 through $grid-columns {
  .col-#{$i} {
    flex: 0 0 percentage($i / $grid-columns);
    max-width: percentage($i / $grid-columns);

    @include respond(compact) {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
}

.section-title {
  font-size: $font-size-lg;
  font-weight: 600;
  letter-spacing: $letter-spacing-wide;
  color: $color-text-primary;
  margin-bottom: $spacing-sm;
}

.section-subtitle {
  font-size: $font-size-sm;
  color: $color-text-muted;
  margin-bottom: $spacing-md;
}

.inline-gap {
  display: inline-flex;
  gap: $spacing-sm;
  align-items: center;
}

.tablet-only {
  @include respond(wide) {
    display: block;
  }

  @include respond(compact) {
    display: none;
  }
}

 common/styles/mixins.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,74 @@
@import './design-tokens.scss';

/**
 * å“åº”式断点
 */
@mixin respond($target) {
  @if $target == compact {
    @media (max-width: $screen-compact) {
      @content;
    }
  } @else if $target == wide {
    @media (min-width: $screen-wide) {
      @content;
    }
  }
}

/**
 * é€šç”¨æ–‡æœ¬æº¢å‡º
 */
@mixin text-ellipsis($lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

/**
 * å¹³æ»‘字体与抗锯齿
 */
@mixin smooth-font {
  font-family: $font-family-base;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * æ»šåŠ¨å®¹å™¨
 */
@mixin scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(27, 36, 51, 0.25);
    border-radius: $radius-sm;
  }
}

/**
 * ç„¦ç‚¹é«˜äº®ï¼Œæå‡å¯æ“ä½œæ€§
 */
@mixin focus-ring {
  outline: none;
  box-shadow: 0 0 0 2px rgba(27, 127, 233, 0.2);
}

/**
 * Flex å·¥å…·
 */
@mixin flex-center($direction: row, $gap: $spacing-sm) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
  gap: $gap;
}

 pages/index.vue

@@ -1,46 +1,55 @@
<template>
<template>

    <view>
        <view class="tab-bar">
            <view class="tab-item" :class="{ active: currentTab === 7 }" @click="changeTab(7)">
    <view class="page-container">
        <!-- é¡¶éƒ¨æ“ä½œæ¡ç»Ÿä¸€å±•ç¤ºæœºå°ä¿¡æ¯ä¸Žå¿«æ·æ“ä½œ -->
        <view class="top-bar">
            <view class="top-bar__title">浜х嚎鎵ц鎺у埗鍙?/view>
            <view class="top-bar__actions inline-gap">
                <view class="device-chip">
                    <text class="device-chip__label">褰撳墠鏈哄彴</text>
                    <text class="device-chip__value">{{ machineName || '鏈粦瀹? }}</text>
                </view>
                <button class="btn btn--secondary" @click="refresh">鍒锋柊</button>
            </view>
        </view>
        <!-- æ¨ªå‘标签导航，保持各业务页样式一致 -->
        <view class="tab-strip">
            <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 7 }" @click="changeTab(7)">
                å·¥å•é€‰æ‹©
            </view>
            <view class="tab-item" :class="{ active: currentTab === 0 }" @click="changeTab(0)">
            <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 0 }" @click="changeTab(0)">
                ä¸»ç•Œé¢
            </view>
            <view class="tab-item" :class="{ active: currentTab === 3 }" @click="changeTab(3)">
            <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 3 }" @click="changeTab(3)">
                è°ƒæœºé€æ£€
            </view>
            <view class="tab-item" :class="{ active: currentTab === 2 }" @click="changeTab(2)">
            <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 2 }" @click="changeTab(2)">
                åˆ€å…·ç®¡ç†
            </view>
            <view class="tab-item" :class="{ active: currentTab === 4 }" @click="changeTab(4)">
            <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 4 }" @click="changeTab(4)">
                ç”Ÿäº§æŠ¥å·¥
            </view>
            <!-- <view class="tab-item" :class="{ active: currentTab === 1 }" @click="changeTab(1)">
            <!-- <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 1 }" @click="changeTab(1)">
                å¼€å·¥å®Œå·¥
            </view> -->
            <view class="tab-item" :class="{ active: currentTab === 5 }" @click="changeTab(5)">
            <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 5 }" @click="changeTab(5)">
                e-SOP
            </view>
            <view class="tab-item" :class="{ active: currentTab === 6 }" @click="changeTab(6)">
            <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 6 }" @click="changeTab(6)">
                å·¥è‰ºå‚æ•°
            </view>
            <view class="tab-item" :class="{ active: currentTab === 9 }" @click="changeTab(9)">
            <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 9 }" @click="changeTab(9)">
                è®¾å¤‡ç‚¹æ£€
            </view>
            <!-- <view class="tab-item" :class="{ active: currentTab === 8 }" @click="changeTab(8)">
            <!-- <view class="tab-strip__item" :class="{ 'tab-strip__item--active': currentTab === 8 }" @click="changeTab(8)">
                æ‰“印机设置
            </view> -->

        </view>
        <view class="font"></view>
        <scroll-view class="content">
            <view v-if="currentTab === 7" class="tab-content">
        <scroll-view class="page-scroll" scroll-y="true">
            <view v-if="currentTab === 7" class="tab-content content-panel">
                <view class="content">
                    <view class="top-right">
                        <button class="refresh-btn" @click="refresh">刷新</button>
                    </view>
                    <!--<view>
                        <h4>一台机台只能选择一条工单（多选默认为最后一条）</h4>
                    </view>-->
@@ -57,61 +66,61 @@
                        <view class="form-row">
                            <view>
                                <label style="float: left;font-family: fantasy;font-size: 33px;margin-top: 20px;">第一步选择工单:</label>
                                <button class="print-btn" @click="isShowTab">选择工单</button>
                                <button class="btn btn--primary choose-order-btn" @click="isShowTab">选择工单</button>
                            </view>
                        </view>
                    </view>

                    <!--          &lt;!&ndash; ä¸­éƒ¨ï¼šè¿è¡ŒçŠ¶æ€-->
                    <view class="section card">
                        <uni-table border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
                            <uni-tr>
                                <uni-th align="center" class="th" style="color: #FFFFFF">工序</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF">工单号</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF">产品编码</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF">产品名称</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF">规格</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">已生产数量</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">未生产数量</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">派工数量</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">工单数量</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">工单状态</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">报工人</uni-th>
                                <uni-th align="center" class="th" style="color: #FFFFFF">选择</uni-th>
                        <uni-table class="table" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
                            <uni-tr class="table__head">
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF">工序</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF">工单号/uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF">产品编码</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF">产品名称</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF">规格</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">已生产数量</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">未生产数量</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">派工数量</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">工单数量</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">工单状态</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">报工人</uni-th>
                                <uni-th align="center" class="th table__cell" style="color: #FFFFFF">选择</uni-th>
                            </uni-tr>
                            <uni-tr v-for="(item, index) in isShowTableData" :key="index">
                                <uni-td align="center">
                            <uni-tr class="table__row" v-for="(item, index) in isShowTableData" :key="index">
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.procName" /><!--工序-->
                                </uni-td>
                                <uni-td align="center">
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa001" />
                                </uni-td>
                                <uni-td align="center">
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa002" />
                                </uni-td>
                                <uni-td align="center">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa003" /><!--产品名称-->
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa003" />
                                </uni-td>
                                <uni-td align="center">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa004" /><!--规格-->
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa004" />
                                </uni-td>
                                <uni-td align="center">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa011" /><!--已生产数量-->
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa011" />
                                </uni-td>
                                <uni-td align="center">
                                    <input class="form-input" disabled="true" type="text" :value="(item.daa008 || 0) - (item.daa011 || 0)" /><!--未生产数量-->
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" :value="(item.daa008 || 0) - (item.daa011 || 0)" />
                                </uni-td>
                                <uni-td align="center">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa008" /><!--派工数量-->
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa008" />
                                </uni-td>
                                <uni-td align="center">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa008" /><!--工单数量-->
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa008" />
                                </uni-td>
                                <uni-td align="center">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa018" /><!--工单状态-->
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.daa018" />
                                </uni-td>
                                <uni-td align="center">
                                    <input class="form-input" disabled="true" type="text" v-model="item.staffName" /><!--报工人-->
                                <uni-td align="center" class="table__cell">
                                    <input class="form-input" disabled="true" type="text" v-model="item.staffName" />
                                </uni-td>
                                <uni-td>
                                    <view class="uni-group">
@@ -136,44 +145,36 @@
                    </view>
                </view>
            </view>
            <view v-if="currentTab === 0" class="tab-content">
            <view v-if="currentTab === 0" class="tab-content content-panel">
                <WorkOrder :orderId="orderId" :orderNo="selectedOrder" :machineNo="machineNo"
                           :deviceNumber="machineName" />
            </view>
            <view v-if="currentTab === 1" class="tab-content">
                <!--        &lt;!&ndash; è°ƒç”¨ WorkOrderStatus ç»„件 &ndash;&gt;-->
            <view v-if="currentTab === 1" class="tab-content content-panel">
                <WorkOrderStatus :orderId="orderId" :orderNo="selectedOrder" :machineNo="machineNo" />
            </view>
            <view v-if="currentTab === 2" class="tab-content">
                <!--        &lt;!&ndash; è°ƒç”¨ mold ç»„件 &ndash;&gt;-->
            <view v-if="currentTab === 2" class="tab-content content-panel">
                <mold :orderId="orderId" :orderNo="selectedOrder" :machineNo="machineNo" />
            </view>
            <view v-if="currentTab === 3" class="tab-content">
                <!--        &lt;!&ndash; è°ƒç”¨ mold ç»„件 &ndash;&gt;-->
            <view v-if="currentTab === 3" class="tab-content content-panel">
                <machine :orderId="orderId" :orderNo="selectedOrder" :machineNo="machineNo" />
            </view>
            <view v-if="currentTab === 4" class="tab-content">
                <!--  è°ƒç”¨ mold ç»„件 -->
            <view v-if="currentTab === 4" class="tab-content content-panel">
                <WorkOrderPrint :orderId="orderId" :orderNo="selectedOrder" :machineNo="machineNo" />
            </view>
            <view v-if="currentTab === 8" class="tab-content">
                <!-- è°ƒç”¨ mold ç»„件 -->
            <view v-if="currentTab === 8" class="tab-content content-panel">
                <PrintInit :orderId="orderId" :orderNo="selectedOrder" :machineNo="machineNo" />
            </view>
            <view v-if="currentTab === 5" class="tab-content">
            <view v-if="currentTab === 5" class="tab-content content-panel">
                <PDFShow :orderId="orderId" :orderNo="selectedOrder" :machineNo="machineNo" />
            </view>
            <view v-if="currentTab === 6" class="tab-content">
            <view v-if="currentTab === 6" class="tab-content content-panel">
                <Technology :orderId="orderId" :orderNo="selectedOrder" :machineNo="machineNo" />
            </view>
            <view v-if="currentTab === 9" class="tab-content">
                <!-- è®¾å¤‡ç‚¹æ£€è§†å›¾ -->
            <view v-if="currentTab === 9" class="tab-content content-panel">
                <EquipmentInspection :machineNo="machineNo" />
            </view>
        </scroll-view>


        <!-- å¼¹çª—下拉框只显示工单状态 -->
        <view v-if="isShow" class="overlay">
            <view class="popup">
                <view class="form-row">
@@ -191,52 +192,52 @@
                        <view class="section card">
                            <uni-table ref="table" type="selection" border stripe emptyText="暂无更多数据"
                                       @selection-change="selectionChange">
                                <uni-tr>
                                    <uni-th align="center" class="th" style="color: #FFFFFF">工序</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF">工单号</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF">产品编码</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF">产品名称</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF">规格</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">已生产数量</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">未生产数量</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">派工数量</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">工单数量</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">工单状态</uni-th>
                                    <uni-th align="center" class="th" style="color: #FFFFFF;width: 100px;">报工人</uni-th>
                                <uni-tr class="table__head">
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF">工序</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF">工单号</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF">产品编码</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF">产品名称</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF">规格</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">已生产数量</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">未生产数量</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">派工数量</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">工单数量</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">工单状态</uni-th>
                                    <uni-th align="center" class="th table__cell" style="color: #FFFFFF;width: 100px;">报工人</uni-th>
                                </uni-tr>
                                <uni-tr v-for="(item, index) in tableData" :key="index">
                                    <uni-td align="center">
                                        <input class="form-input" disabled="true" type="text" v-model="item.procName" /><!--工序-->
                                <uni-tr class="table__row" v-for="(item, index) in tableData" :key="index">
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.procName" />
                                    </uni-td>
                                    <uni-td align="center">
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa001" />
                                    </uni-td>
                                    <uni-td align="center">
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa002" />
                                    </uni-td>
                                    <uni-td align="center">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa003" /><!--产品名称-->
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa003" />
                                    </uni-td>
                                    <uni-td align="center">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa004" /><!--规格-->
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa004" />
                                    </uni-td>
                                    <uni-td align="center">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa011" /><!--已生产数量-->
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa011" />
                                    </uni-td>
                                    <uni-td align="center">
                                        <input class="form-input" disabled="true" type="text" :value="(item.daa008 || 0) - (item.daa011 || 0)" /><!--未生产数量-->
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" :value="(item.daa008 || 0) - (item.daa011 || 0)" />
                                    </uni-td>
                                    <uni-td align="center">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa008" /><!--派工数量-->
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa008" />
                                    </uni-td>
                                    <uni-td align="center">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa008" /><!--工单数量-->
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa008" />
                                    </uni-td>
                                    <uni-td align="center">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa018" /><!--工单状态-->
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.daa018" />
                                    </uni-td>
                                    <uni-td align="center">
                                        <input class="form-input" disabled="true" type="text" v-model="item.staffName" /><!--报工人-->
                                    <uni-td align="center" class="table__cell">
                                        <input class="form-input" disabled="true" type="text" v-model="item.staffName" />
                                    </uni-td>
                                </uni-tr>
                            </uni-table>
@@ -255,7 +256,7 @@
</template>

<script>
import WorkOrderStatus from '../components/WorkOrderStatus.vue'; // ç¡®ä¿è·¯å¾„正确
import WorkOrderStatus from '../components/WorkOrderStatus.vue';
import UniTable from "../uni_modules/uni-table/components/uni-table/uni-table.vue";
import Mold from "../components/mold.vue";
import Machine from "../components/machine.vue";
@@ -833,49 +834,67 @@
        flex-direction: column;
    }

    .tab-bar {
    /* é¡¶éƒ¨æœºå°ä¿¡æ¯èƒ¶å›Š */
    .device-chip {
        display: flex;
        justify-content: space-around;
        background-color: #f5f5f5;
        padding: 1vh;
        padding-top: 30px;
        border-bottom: 1px solid #ccc;
        flex-direction: column;
        justify-content: center;
        min-width: 180px;
        padding: 8px 16px;
        border-radius: 12px;
        background: rgba(30, 58, 95, 0.12);
        border: 1px solid rgba(30, 58, 95, 0.35);
        color: #1e3a5f;
    }

    .top-right {
        position: absolute;
        top: 10px;
        right: 50px;
        z-index: 1000;
    .device-chip__label {
        font-size: 12px;
        letter-spacing: 0.08em;
        color: rgba(27, 36, 51, 0.65);
    }

    .refresh-btn {
        padding: 10px;
        background-color: #00A2E9;
        color: white;
        border: none;
        font-size: 1.5vw;
        border-radius: 5px;
    .device-chip__value {
        font-size: 18px;
        font-weight: 600;
    }

    .tab-item {
    /* é¡¶éƒ¨å¯¼èˆªæ ‡ç­¾ */
    .tab-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin: 24px 0;
        padding: 16px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16px;
        border: 1px solid rgba(30, 58, 95, 0.12);
        box-shadow: 0 20px 50px rgba(15, 34, 58, 0.12);
    }

    .tab-strip__item {
        flex: 1;
        min-width: 140px;
        text-align: center;
        margin-right: 0.5vw;
        padding: 1vh;
        border-radius: 0.5vw;
        background-color: #fff;
        color: #007aff;
        padding: 16px 12px;
        border-radius: 12px;
        background: rgba(30, 58, 95, 0.05);
        color: #1e3a5f;
        cursor: pointer;
        font-size: 1.8vw;
        /* Increased font size */
        transition: background-color 0.3s, color 0.3s;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.04em;
        transition: all 0.2s ease;
    }

    .tab-item.active {
        background-color: #007aff;
    .tab-strip__item:hover {
        background: rgba(27, 127, 233, 0.1);
        box-shadow: inset 0 0 0 1px rgba(27, 127, 233, 0.4);
    }

    .tab-strip__item--active {
        background: linear-gradient(135deg, #1e3a5f 0%, #0f223a 100%);
        color: #fff;
        font-weight: bold;
        box-shadow: 0 12px 35px rgba(15, 34, 58, 0.35);
    }

    .content {
@@ -953,21 +972,12 @@
        /* Increased font size within popups */
    }

    .print-btn {
        float: left;
        margin-top: 4px;
        margin-left: 10px;
        text-align: center;
        font-size: 100%;
        color: black;
        padding: 0px 90px;
        border: 2px solid #ccc;
        cursor: pointer;
        border-radius: 0.8vw;
    .choose-order-btn {
        margin-left: 12px;
    }

    @media screen and (max-width: 1920px) {
        .tab-item {
        .tab-strip__item {
            font-size: 1.6vw;
        }


 uni.scss

@@ -74,3 +74,8 @@
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // æ–‡ç« æ®µè½é¢œè‰²
$uni-font-size-paragraph:15px;

@import "./common/styles/design-tokens.scss";
@import "./common/styles/mixins.scss";
@import "./common/styles/layout.scss";
@import "./common/styles/components.scss";