合并项目

快乐的昕的电脑

2025-12-04 38c3c332ae1aa7ee2c520b2ee9ab52af995bbbc3

 components/WorkOrderStatus.vue

@@ -1,45 +1,49 @@
<template>
   <view class="page">
      <!-- 刷新按钮 -->
      <button @click="handleRefresh" class="refresh-btn">刷新</button>
      <view>
         <h4>说明:</br>开工时间=首件合格后取送检时间,</br>完工时间=报工数等于工单数的时间</h4>
      </view>
      <!-- 上半部分 -->
      <!-- 开工完工 -->

      <view class="top-section">
         <!-- 左边工单按钮组和输入框，左右布局 -->
         <view class="left-section">
            <view class="item">
               <button class="btn-disabled">开工</button>
               <input class="input-box" v-model="startTime" disabled="true" placeholder="开工时间=首件合格后取送检时间" />
            </view>
            <view class="item">
               <button class="btn-disabled">完工</button>
               <input class="input-box" v-model="endTime" disabled="true" placeholder="报工数达到计划数后自动完工" />
            </view>
            <view class="item">
               <button @click="stateCheck(2)" class="btn-blue">暂停</button>
               <input class="input-box" v-model="suspendTime" disabled="true" placeholder="点暂停按钮时写入" />
            </view>
            <!--<view class="item">
               <button @click="stateCheck(2)" class="btn-blue">反暂停</button>
               <input class="input-box" v-model="suspendTime" disabled="true" placeholder="点暂停按钮时写入" />
            </view>-->
            <!-- <view class="item">
      <button @click="stateCheck(3)" class="btn-blue">反完工</button>
      <input class="input-box" v-model="reverseTime" disabled="true" placeholder="点反完工按钮写入" />
   </view> -->
         <!-- 第一行：工单号和刷新按钮 -->
         <view class="header-row">
            <text class="order-label">工单号</text>
            <text class="order-input">{{ orderNo }}</text>
            <button @click="handleRefresh" class="refresh-btn">刷新</button>
         </view>

         <!-- 右边工单状态 -->
         <view class="right-section">
            <text class="status-title">工单号</text>
            <text class="status-title"><input class="status-title" type="text" v-model="orderNo" disabled="true" /></text>
            <text class="status-title">工单状态</text>
            <view class="status-circle">
               <input class="status-input" v-model="workOrderStatus" disabled="true" />
			
         <!-- 三列布局 -->
         <view class="three-column-layout">
            <!-- 第一列：按钮 -->
            <view class="column buttons-column">
               <view class="button-item">
                  <button class="btn-disabled">开工</button>
               </view>
               <view class="button-item">
                  <button class="btn-disabled">完工</button>
               </view>
               <view class="button-item">
                  <button @click="stateCheck(2)" class="btn-blue">暂停</button>
               </view>
            </view>
				
            <!-- 第二列：输入框 -->
            <view class="column inputs-column">
               <view class="input-item">
                  <input class="input-box" v-model="startTime" disabled="true" placeholder="开工时间=首件合格后取送检时间" />
               </view>
               <view class="input-item">
                  <input class="input-box" v-model="endTime" disabled="true" placeholder="报工数达到计划数后自动完工" />
               </view>
               <view class="input-item">
                  <input class="input-box" v-model="suspendTime" disabled="true" placeholder="点暂停按钮时写入" />
               </view>
            </view>
				
            <!-- 第三列：工单状态 -->
            <view class="column status-column">
               <text class="status-label">工单状态</text>
               <view class="status-circle">
                  <input class="status-input" v-model="workOrderStatus" disabled="true" />
               </view>
            </view>
         </view>
      </view>
@@ -216,209 +220,220 @@
</script>

<style scoped>
   .page {
      padding: 2vh;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
   }
    .page {
        padding: 1vh; /* 原2vh，缩小整体上下间距 */
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
    }

   /* 刷新按钮样式 */
    /* 第一行：工单号和刷新按钮 */
    .header-row {
        display: flex;
        align-items: center;
        margin-bottom: 2vh;
        width: 100%;
        box-sizing: border-box;
    }

    .order-label {
        font-size: 22px;
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0; /* 防止标签被压缩 */
        margin-right: 1vw;
    }

    .order-input {
        flex: 1;
        padding: 0 1vw;
        font-size: 30px; /* 设置为30px字体 */
        font-weight: bold; /* 加粗显示 */
        box-sizing: border-box;
        height: 80px; /* 与按钮高度一致 */
        min-width: 0; /* 允许输入框收缩 */
        margin-right: 1vw; /* 与刷新按钮之间留间隙 */
        display: flex;
        align-items: center;
    }

    /* 刷新按钮样式 */
    .refresh-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #00A2E9;
        /* 蓝色背景 */
        color: white;
        height: 60px;
        padding: 8px 20px;
        border: none;
        border-radius: 5px;
        font-size: 35px;
        border-radius: 4px;
        font-size: 22px;
        font-weight: 500;
        cursor: pointer;
        width: 90px !important; /* 更窄 */
        height: 60px !important; /* 更高 */
        font-size: 22px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
        width: 150px; /* 设置宽度为150px */
        height: 80px; /* 设置高度为80px */
        flex-shrink: 0; /* 防止按钮被压缩 */
    }

   /* 上半部分：左右布局 */
    .top-section {
    /* 三列布局 */
    .three-column-layout {
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
        margin-bottom: 4vh;
        flex-wrap: nowrap; /* 防止子元素换行 */
    }

    .left-section {
        width: 50%; /* 再缩小一点 */
        display: flex;
        flex-direction: column;
    }

    .item {
        display: flex;
        align-items: center;
        margin-bottom: 3vh;
        flex-wrap: nowrap; /* 禁止换行 */
    }

   /* 统一按钮和输入框的高度 */
    button,
    .input-box {
        width: 55% !important; /* 原70%，改为50%，更窄 */
        height: 4vh !important; /* 原6vh，改为4vh，更矮 */
        font-size: 1.2vw !important; /* 字体更小 */
        padding: 0 0.8vw !important; /* 内边距略减 */
        border: 2px solid #999 !important;
        border-radius: 5px !important;
        gap: 2vw;
        flex: 1;
        width: 100%;
        box-sizing: border-box;
    }

   button {
      width: 30%;
      padding: 0;
      font-size: 1.8vw;
      /* Larger font for buttons */
      margin-right: 1vw;
      line-height: 5vh;
   }

   .btn-disabled {
      background-color: #ccc;
      color: #fff;
      border: none;
   }

   .btn-blue {
      background-color: #00A2E9;
      color: #fff;
      border: none;
   }

   .input-box {
      width: 70%;
      padding: 0 1vw;
      font-size: 1.5vw;
      /* Increased font size for input */
      border: 1px solid #ccc;
      box-sizing: border-box;
      /* 确保高度一致 */
   }

   /* 右边工单状态部分 */
    .right-section {
        width: 28%; /* 再缩小一点 */
    .column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: center;
        padding-top: 45px;
        flex-wrap: wrap;
        align-content: flex-start;
        margin-top: -44px;
        gap: 1.5vh;
        flex: 1; /* 每列等宽 */
        min-width: 0; /* 允许列收缩 */
    }

   .status-title {
      margin-bottom: 2vh;
      font-size: 2vw;
      /* Larger font size for titles */
   }
    /* 按钮列 */
    .buttons-column {
        /* width: 30%; 移除固定宽度 */
    }

   .status-circle {
      width: 11vw;
      /* Enlarged status circle */
      height: 11vw;
      background-color: #00A2E9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
    .button-item {
        display: flex;
        align-items: center;
        height: 6vh;
        width: 100%;
    }

   .status-input {
      color: white;
      font-size: 2vw;
      /* Increased font size for status input */
      background: transparent;
      border: none;
      text-align: center;
      width: 100%;
      height: 100%;
      outline: none;
   }
    /* 输入框列 */
    .inputs-column {
        /* width: 40%; 移除固定宽度 */
    }

   /* 下半部分：保存和取消按钮 */
    .input-item {
        display: flex;
        align-items: center;
        height: 6vh;
        width: 100%;
    }

    /* 状态列 */
    .status-column {
        /* width: 30%; 移除固定宽度 */
        justify-content: center;
        padding-top: 2vh;
    }

    .status-label {
        font-size: 22px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 1vh;
    }

    /* 上半部分：左右布局 */
    .top-section {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        margin-bottom: 1.5vh; /* 原4vh，缩小上下间隔 */
        width: 100%;
        box-sizing: border-box;
    }

    /* 统一按钮和输入框的高度 */
    button,
    .input-box {
        height: 6vh; /* 按钮和输入框更高 */
    }

    button {
        width: 100%; /* 按钮占满容器宽度 */
        padding: 0;
        font-size: 22px; /* 字体更大 */
        font-weight: 500;
        line-height: 6vh;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
        box-sizing: border-box;
    }

    .btn-disabled {
        background-color: #ccc;
        color: #fff;
        border: none;
    }

    .btn-blue {
        background-color: #00A2E9;
        color: #fff;
        border: none;
    }

    .input-box {
        width: 100%; /* 输入框占满容器宽度 */
        padding: 0 1vw;
        font-size: 22px; /* 字体更大 */
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        min-width: 0; /* 允许输入框收缩 */
    }

    .status-circle {
        width: 11vw;
        /* Enlarged status circle */
        height: 11vw;
        background-color: #00A2E9;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 0 auto;
        min-width: 80px; /* 设置最小宽度 */
        min-height: 80px; /* 设置最小高度 */
    }

    .status-input {
        color: white;
        font-size: 22px;
        font-weight: 500;
        /* Increased font size for status input */
        background: transparent;
        border: none;
        text-align: center;
        width: 100%;
        height: 100%;
        outline: none;
    }

    /* 下半部分：保存和取消按钮 */
    .bottom-section {
        display: flex;
        margin-top: 1vh;
        justify-content: space-between;
        margin-top: 0.5vh; /* 原1vh，缩小与上方间隔 */
        height: 100%;
        justify-content: flex-end; /* 让按钮靠右对齐（可选） */
        gap: 16px; /* 按钮间距 */
   }
        width: 100%;
        box-sizing: border-box;
    }

    .save-btn,
    .cancel-btn {
        width: 48%;
        padding: 1.5vh;
        background-color: #00A2E9;
        color: white;
        border: none;
        text-align: center;

        width: 90px !important; /* 更窄 */
        height: 60px !important; /* 更高 */
        font-size: 22px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: inline-block;
    }

    /* 让右侧工单号输入框变长 */
    .status-title input.status-title {
        width: 110%; /* 或 100%，根据实际需求调整 */
        min-width: 320px; /* 可选，保证最小宽度 */
        font-size: 2vw;
        font-size: 22px;
        font-weight: 500;
        /* Larger font for buttons */
        height: 100%;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
        box-sizing: border-box;
    }

    .button,
    .input-box {
        font-size: 2.2vw !important; /* 字体更大 */
        height: 6vh !important; /* 高度略增 */
    }

    .input-box {
        border: 2.5px solid #999 !important; /* 边框更粗更明显 */
        border-radius: 6px !important; /* 圆角略大 */
        padding: 0 1.5vw !important;
    }

    button {
        border: 2.5px solid #999 !important; /* 按钮边框加粗 */
        border-radius: 6px !important;
    }

    .left-section .item button {
        border-width: 1px !important; /* 边框更粗 */
        border-style: solid !important;
        border-color: #999 !important; /* 保持原有色调 */
        font-size: 2.6vw !important; /* 字体更大 */
        font-weight: bold;
        height: 7vh !important; /* 按钮高度加大 */
        margin-right: 2%; /* 与输入框间距 */
        box-sizing: border-box;

        width: 38% !important; /* 按钮略宽一点，避免输入框太窄 */
        min-width: 70px;
    }

    .left-section .item .input-box {
        width: 45% !important; /* 原60%，改为45% */
        min-width: 100px;
        box-sizing: border-box;
    }

</style>