提交ddl

leiqunqing

2026-02-06 8aa5f0e094e6ff51aa7c47d5b4e8331a16eb09ff

 ´úÂë¹ÜÀí/WIDESEAWCS_Client/src/views/Home.vue

@@ -1,24 +1,863 @@
<template>
  <div class="title"></div>
  <div class="container">
    <!-- å·¦ä¾§åŒºåŸŸ - ä»…保留信号灯+成品/零件区域 -->
    <div class="left-area">
      <div class="left-top">
        <div class="signal-status">
          <div class="signal-item" v-for="(signal, index) in signalStates" :key="index">
            <div
              class="signal-light"
              :class="signal ? 'signal-active' : 'signal-inactive'"
            >
              <div class="signal-light-inner"></div>
            </div>
            <span class="signal-label">{{ signalLabels[index] }}</span>
          </div>
        </div>
      </div>

      <div class="left-bottom">
        <div class="form-row finished-product-row">
          <span class="label">成品编号：</span>
          <input type="text" class="input-box" v-model="finishedProduct" disabled />
        </div>
        <div class="parts-list">
          <div
            class="form-row part-item"
            v-for="(item, index) in leftPartCodes"
            :key="index"
          >
            <span class="label">零件{{ index + 1 }}：</span>
            <input
              type="text"
              class="input-box"
              v-model="leftPartCodes[index]"
              disabled
            />
            <label class="checkbox-container">
              <input
                type="checkbox"
                class="part-checkbox"
                v-model="leftPartChecked[index]"
                @change="handlePartCheck(index)"
                :disabled="checkLoading[index]"
              />
              <span class="checkmark"></span>
              <span class="checkbox-label">{{
                leftPartChecked[index] ? "扫码" : "不扫"
              }}</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- å³ä¾§åŒºåŸŸ - ä¿ç•™åŽŸæœ‰å½•å…¥+提交+清除功能 -->
    <div class="right-area">
      <div class="right-top">
        <div class="form-row input-submit-row">
          <span class="label">录入框：</span>
          <input type="text" class="input-box" v-model="rightTopInput" />
          <button class="btn save-btn submit-input-btn" @click="saveData">
            <i class="icon icon-submit"></i>提交
          </button>
        </div>
      </div>

      <div class="right-bottom">
        <div class="parts-list">
          <div class="form-row part-item finished-product-row">
            <span class="label">成品编号：</span>
            <input
              type="text"
              class="input-box"
              v-model="finishedProductCode"
              placeholder="请输入成品编号"
            />
            <button class="btn clear-btn" @click="clearFinishedProductCode">
              <i class="icon icon-clear"></i>清除
            </button>
          </div>
          <div
            class="form-row part-item"
            v-for="(item, index) in rightPartCodes"
            :key="index"
          >
            <span class="label">零件{{ index + 1 }}：</span>
            <input
              type="text"
              class="input-box"
              v-model="rightPartCodes[index]"
              placeholder="请输入零件编号"
            />
            <button class="btn clear-btn" @click="clearRightPart(index)">
              <i class="icon icon-clear"></i>清除
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ref, onMounted, onUnmounted, watch, computed } from "vue";
import axios from "axios";

export default {
  setup() {
    return {
    // åŸºç¡€æ•°æ®å®šä¹‰
    const finishedProduct = ref(""); // å·¦ä¾§æˆå“ç¼–号（接口返回）
    const finishedProductId = ref(""); // å·¦ä¾§æˆå“ID（接口返回）
    const rightTopInput = ref(""); // å³ä¾§æ ¸å¿ƒå½•å…¥æ¡†
    const leftPartCodes = ref(Array(10).fill("")); // å·¦ä¾§é›¶ä»¶ç¼–号数组
    const rightPartCodes = ref(Array(10).fill("")); // å³ä¾§é›¶ä»¶ç¼–号数组
    const leftPartChecked = ref(Array(10).fill(false)); // å·¦ä¾§é›¶ä»¶å‹¾é€‰çŠ¶æ€
    const leftPartIds = ref(Array(10).fill("")); // å·¦ä¾§é›¶ä»¶ID（接口返回）
    const finishedProductCode = ref(""); // å³ä¾§æˆå“ç¼–号输入框
    const fillIndex = ref(-1); // å½•å…¥æ¡†è‡ªåŠ¨å¡«å……索引
    const checkLoading = ref(Array(10).fill(false)); // é›¶ä»¶å‹¾é€‰åŠ è½½é”

    }
  }
}
    // ä¿¡å·ç¯ç›¸å…³
    const signalStates = ref([false, false, false, false, false]);
    const signalLabels = ref([
      "心跳信号",
      "急停信号",
      "自动运行信号",
      "在线模式信号",
      "故障信号",
    ]);

    // å®šæ—¶/防抖相关变量
    let pollingTimer = null;
    const pollingInterval = 5000; // ä¿¡å·ç¯è½®è¯¢é—´éš”5秒
    let checkDebounceTimer = null;
    let destroyDelayTimer = null;
    const destroyDelayTime = 500; // å½•å…¥æ¡†å¡«å……延迟500ms
    let autoSubmitDebounceTimer = null;
    let submitLock = ref(false); // æäº¤é”ï¼Œé˜²æ­¢é‡å¤æäº¤

    // è®¡ç®—属性 - ç»Ÿè®¡æœ‰æ•ˆå‹¾é€‰/填充数量（过滤空值）
    const checkedCount = computed(() => {
      return leftPartChecked.value.filter((checked) => checked === true).length;
    });
    const filledPartCount = computed(() => {
      return rightPartCodes.value.filter((code) => code.trim() !== "").length;
    });

    // èŽ·å–左侧初始数据（成品+零件+勾选状态）
    const fetchLeftInitialData = async () => {
      try {
        console.log("正在获取左侧初始数据...");
        const response = await axios.get("/api/scanStation/GetLeftInitialData", {
          timeout: 5000,
        });
        const resData = response.data;
        const isSuccess = resData.Status === true || resData.status === true;
        if (isSuccess) {
          const data = resData.Data || resData.data || {};
          if (data.finishedProductId) finishedProductId.value = data.finishedProductId;
          if (data.finishedProduct) finishedProduct.value = data.finishedProduct;
          if (Array.isArray(data.leftPartCodes) && data.leftPartCodes.length >= 10) {
            for (let i = 0; i < 10; i++) {
              leftPartCodes.value[i] = data.leftPartCodes[i] || "";
              leftPartIds.value[i] = data.leftPartIds?.[i] || "";
            }
          }
          if (Array.isArray(data.leftPartChecked) && data.leftPartChecked.length >= 10) {
            for (let i = 0; i < 10; i++) {
              leftPartChecked.value[i] = !!data.leftPartChecked[i];
            }
          }
        }
      } catch (error) {
        console.error("获取左侧初始数据失败：", error);
      }
    };

    // èŽ·å–信号灯状态（定时轮询）
    const fetchSignalAndPLCStates = async () => {
      try {
        const response = await axios.get("/api/scanStation/GetSignalStates", {
          timeout: 5000,
        });
        const resData = response.data;
        const isSuccess = resData.Status === true || resData.status === true;
        if (isSuccess) {
          const data = resData.Data || resData.data || {};
          const newSignalStates = data.signalStates || [];
          for (let i = 0; i < 5; i++) signalStates.value[i] = newSignalStates[i] ?? false;
        }
      } catch (error) {
        console.error("获取信号状态失败：", error);
      }
    };

    // å¯åŠ¨/停止信号灯轮询
    const startPolling = () => {
      if (pollingTimer) clearInterval(pollingTimer);
      fetchSignalAndPLCStates();
      pollingTimer = setInterval(fetchSignalAndPLCStates, pollingInterval);
    };
    const stopPolling = () => {
      if (pollingTimer) clearInterval(pollingTimer);
      pollingTimer = null;
    };

    // å·¦ä¾§é›¶ä»¶å‹¾é€‰çŠ¶æ€å˜æ›´å¤„理（更新后端状态）
    const handlePartCheck = async (index) => {
      const isChecked = leftPartChecked.value[index];
      const partCode = leftPartCodes.value[index];
      const partId = leftPartIds.value[index];

      // å‰ç½®æ ¡éªŒ
      if (!finishedProductId.value) {
        alert("成品ID不存在，无法更新零件扫码状态！");
        leftPartChecked.value[index] = !isChecked;
        return;
      }
      if (!partId) {
        alert(`零件${index + 1}数据库ID不存在，无法更新扫码状态！`);
        leftPartChecked.value[index] = !isChecked;
        return;
      }
      if (!partCode.trim()) {
        alert(`零件${index + 1}编号为空，无法更新扫码状态！`);
        leftPartChecked.value[index] = !isChecked;
        return;
      }

      checkLoading.value[index] = true;
      try {
        const response = await axios.post(
          "/api/scanStation/UpdatePartScannedStatus",
          { Id: partId, IsScanned: isChecked ? 1 : 0 },
          { timeout: 5000 }
        );
        const resData = response.data;
        const isSuccess = resData.Status === true || resData.status === true;
        if (isSuccess) {
          console.log(`零件${index + 1}扫码状态更新成功`);
        } else {
          leftPartChecked.value[index] = !isChecked;
          alert(
            `零件${index + 1}状态更新失败：${
              resData.Message || resData.message || "未知错误"
            }`
          );
        }
      } catch (error) {
        leftPartChecked.value[index] = !isChecked;
        alert(`零件${index + 1}状态更新请求失败，请检查网络或接口！`);
        console.error(`更新零件${index + 1}扫码状态失败：`, error);
      } finally {
        checkLoading.value[index] = false;
        if (checkDebounceTimer) clearTimeout(checkDebounceTimer);
        checkDebounceTimer = null;
      }
    };

    // å³ä¾§å½•å…¥æ¡†å»¶è¿Ÿå¡«å……逻辑（成品→零件依次填充）
    const fillContent = () => {
      if (!rightTopInput.value.trim()) return;
      const inputValue = rightTopInput.value.trim();

      if (destroyDelayTimer) clearTimeout(destroyDelayTimer);
      destroyDelayTimer = setTimeout(() => {
        if (!finishedProductCode.value.trim()) {
          finishedProductCode.value = inputValue;
        } else if (fillIndex.value < 10) {
          rightPartCodes.value[fillIndex.value] = inputValue;
          fillIndex.value++;
        } else {
          alert("成品编号和零件1-10已全部填充完成,无法继续录入!");
          rightTopInput.value = "";
          destroyDelayTimer = null;
          return;
        }
        rightTopInput.value = "";
        destroyDelayTimer = null;
      }, destroyDelayTime);
    };

    // ç›‘听右侧录入框输入，触发自动填充
    watch(
      rightTopInput,
      (newVal) => {
        if (newVal.trim()) fillContent();
      },
      { immediate: false }
    );

    // å³ä¾§è¾“入框清除方法
    const clearRightPart = (index) => (rightPartCodes.value[index] = "");
    const clearFinishedProductCode = () => (finishedProductCode.value = "");

    // æ ¸å¿ƒä¿®æ”¹ï¼šæ¢å¤æˆå“ç¼–号必填校验，未填写直接提示并终止提交
    const saveData = async () => {
      // 1. æˆå“ç¼–号必填校验【核心新增】
      const productCode = finishedProductCode.value.trim();
      if (!productCode) {
        alert("请先填写成品编号，成品编号为必填项！");
        return;
      }
      // 2. æäº¤é”ï¼šé˜²æ­¢é‡å¤ç‚¹å‡»
      if (submitLock.value) return;
      submitLock.value = true;

      try {
        // 3. ä¼ å‚适配：后端Dto是大驼峰字段！必须严格匹配（FinishedProductCode/PartsList）
        const submitData = {
          FinishedProductCode: productCode, // ç›´æŽ¥ä½¿ç”¨å·²æ ¡éªŒçš„非空值
          PartsList: rightPartCodes.value.map((item) => item.trim()),
        };
        console.log("📤 æäº¤åˆ°SaveToolingBoardNo的参数（匹配后端Dto）：", submitData);

        // 4. è°ƒç”¨åŽç«¯æŽ¥å£ï¼Œå»¶é•¿è¶…时时间（后端有PLC交互，500ms休眠，设为10秒）
        const response = await axios.post(
          "/api/boxingDetail/SaveToolingBoardNo",
          submitData,
          { timeout: 10000 }
        );
        const resData = response.data;
        console.log("📥 SaveToolingBoardNo接口返回：", resData);

        // 5. é€‚配后端返回格式：status为true表示成功，否则取message错误信息
        if (resData.status === true) {
          finishedProductCode.value = "";
          rightPartCodes.value = Array(10).fill("");
          rightTopInput.value = "";
          fillIndex.value = -1;
        } else {
          // ä¸šåŠ¡é”™è¯¯ï¼šç›´æŽ¥å±•ç¤ºåŽç«¯è¿”回的message（如物料错误、无配方）
          const errorMsg = resData.message || "提交失败，未知业务错误";
          alert(`提交失败：${errorMsg}`);
        }
      } catch (error) {
        // 6. å¼‚常捕获：兼容后端未捕获异常（如PLC通讯异常、数组越界、500错误）
        let errorMsg = "提交请求异常！";
        if (error.code === "ECONNABORTED") {
          errorMsg = "提交请求超时！后端PLC交互/数据库操作耗时过长";
        } else if (error.response) {
          // æœåŠ¡å™¨500错误：后端抛出未捕获异常（如PLC未连接、零件不匹配）
          errorMsg = `服务器错误：${error.response.status} - ${error.response.statusText}，请检查PLC通讯或配方配置`;
          console.error("❌ åŽç«¯æœåŠ¡å™¨é”™è¯¯è¯¦æƒ…：", error.response.data);
        } else if (error.request) {
          errorMsg = "网络异常！未收到后端响应，请检查接口地址和网络";
        } else {
          errorMsg = `请求错误：${error.message}`;
        }
        alert(errorMsg);
        console.error("❌ æäº¤æŽ¥å£å¼‚常详情：", error);
      } finally {
        // 7. é‡Šæ”¾æäº¤é”ï¼šæ— è®ºæˆåŠŸ/失败都要释放
        submitLock.value = false;
      }
    };

    // æ ¸å¿ƒä¿®æ”¹ï¼šè‡ªåŠ¨æäº¤é€»è¾‘同步增加成品编号必填校验（无成品编号不触发自动提交）
    const checkAutoSubmit = () => {
      if (autoSubmitDebounceTimer) clearTimeout(autoSubmitDebounceTimer);
      autoSubmitDebounceTimer = setTimeout(() => {
        const needCheckNum = checkedCount.value; // å·¦ä¾§å‹¾é€‰é›¶ä»¶æ•°
        const filledNum = filledPartCount.value; // å³ä¾§æœ‰æ•ˆå¡«å……零件数
        const productCode = finishedProductCode.value.trim(); // æˆå“ç¼–号（去空格）
        const hasProductCode = !!productCode; // æˆå“ç¼–号是否有效【保留原逻辑，实际是必填校验】

        console.log(
          `✅ è‡ªåŠ¨æäº¤æ ¡éªŒï¼šå‹¾é€‰${needCheckNum}个 | å¡«å……${filledNum}个 | æˆå“å·²å¡«${hasProductCode}`
        );

        // å‰ç½®æ€»æ ¡éªŒï¼šæˆå“ç¼–号未填写，直接不触发任何自动提交【核心强化】
        if (!hasProductCode) {
          console.log("⚠️ æˆå“ç¼–号未填写，跳过自动提交");
          autoSubmitDebounceTimer = null;
          return;
        }

        // åœºæ™¯1：左侧无勾选 â†’ ä»…成品编号有效即提交（已满足hasProductCode）
        if (needCheckNum === 0) {
          if (!submitLock.value) {
            console.log("✅ æ— é›¶ä»¶å‹¾é€‰ï¼Œæˆå“å·²å¡«ï¼Œæ‰§è¡Œè‡ªåŠ¨æäº¤ï¼");
            saveData();
          }
        }
        // åœºæ™¯2：左侧有勾选 â†’ æˆå“æœ‰æ•ˆ + å¡«å……æ•°=勾选数 æ‰æäº¤ï¼ˆå·²æ»¡è¶³hasProductCode）
        else {
          if (filledNum === needCheckNum && !submitLock.value) {
            console.log("✅ é›¶ä»¶æ•°é‡åŒ¹é…ï¼Œæˆå“å·²å¡«ï¼Œæ‰§è¡Œè‡ªåŠ¨æäº¤ï¼");
            saveData();
          }
        }
        autoSubmitDebounceTimer = null;
      }, 300); // 300ms防抖，避免输入频繁触发
    };

    // ç›‘听自动提交相关数据变化，触发校验
    watch([checkedCount, filledPartCount, finishedProductCode], () => checkAutoSubmit(), {
      deep: true,
      immediate: false,
    });

    // è‡ªåŠ¨æ£€æµ‹å¡«å……索引（成品填完后，指向第一个空零件框）
    const detectFillIndex = () => {
      if (!finishedProductCode.value.trim()) {
        fillIndex.value = -1;
        return;
      }
      for (let i = 0; i < 10; i++) {
        if (!rightPartCodes.value[i].trim()) {
          fillIndex.value = i;
          return;
        }
      }
      fillIndex.value = 10;
    };

    // ç›‘听成品/零件输入，更新填充索引
    watch([finishedProductCode, () => [...rightPartCodes.value]], detectFillIndex, {
      immediate: true,
      deep: true,
    });

    // ç”Ÿå‘½å‘¨æœŸï¼šæŒ‚载时加载初始数据+启动轮询
    onMounted(async () => {
      await fetchLeftInitialData();
      startPolling();
      detectFillIndex();
    });

    // ç”Ÿå‘½å‘¨æœŸï¼šå¸è½½æ—¶æ¸…除所有定时器/防抖，防止内存泄漏
    onUnmounted(() => {
      stopPolling();
      [checkDebounceTimer, destroyDelayTimer, autoSubmitDebounceTimer].forEach(
        (t) => t && clearTimeout(t)
      );
    });

    // æš´éœ²æ¨¡æ¿æ‰€éœ€å±žæ€§/方法
    return {
      finishedProduct,
      rightTopInput,
      leftPartCodes,
      rightPartCodes,
      leftPartChecked,
      signalStates,
      signalLabels,
      finishedProductCode,
      checkLoading,
      handlePartCheck,
      saveData,
      clearRightPart,
      clearFinishedProductCode,
    };
  },
};
</script>

<style scoped>
.title {
  line-height: 70vh;
  text-align: center;
  font-size: 28px;
  color: orange;
/* åŸºç¡€æ ·å¼é‡ç½® */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
</style>
*::-webkit-scrollbar {
  display: none;
}

body {
  background: linear-gradient(135deg, #f0f4f8 0%, #e9ecef 100%);
  min-height: 100vh;
  overflow: hidden;
  font-size: 14px;
}

/* ä¸»å®¹å™¨ */
.container {
  display: flex;
  width: 100%;
  height: 100vh;
  gap: 15px;
  padding: 15px;
  overflow: hidden;
}

/* å·¦å³åŒºåŸŸé€šç”¨æ ·å¼ */
.left-area,
.right-area {
  flex: 1;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  box-shadow: 0 6px 16px rgba(149, 157, 165, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* å·¦ä¾§é¡¶éƒ¨-信号灯区域 */
.left-top {
  background: #f8fafc;
  padding: 20px 15px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signal-status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  flex-shrink: 0;
  width: 100%;
}

/* ä¸Šä¸‹åŒºåŸŸé€šç”¨ */
.left-bottom,
.right-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow: hidden !important;
}
.right-top {
  padding: 15px;
  background: #f8fafc;
  border-radius: 12px;
  flex-shrink: 0;
}

/* è¡¨å•è¡Œé€šç”¨æ ·å¼ */
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  height: 48px;
  line-height: 48px;
  flex-shrink: 0;
  width: 100%;
}
.input-submit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  height: 48px;
  line-height: 48px;
  flex-shrink: 0;
  width: 100%;
}
.form-row:hover {
  background: #f8fafc;
}

/* æˆå“ç¼–号行样式 */
.right-bottom .finished-product-row {
  margin-top: 16px;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding-top: 2px;
  padding-bottom: 2px;
}
.left-bottom .finished-product-row {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
}

/* é›¶ä»¶é¡¹æ ·å¼ */
.part-item {
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 3px;
}
.part-item:last-child {
  border-bottom: none;
}

/* æ ‡ç­¾æ ·å¼ */
.label {
  width: 90px;
  text-align: right;
  color: #334155;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

/* è¾“入框样式 */
.input-box {
  flex: 1;
  min-width: 100px;
  height: 42px;
  padding: 0 15px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  outline: none;
  font-size: 15px;
  transition: all 0.2s ease;
  background-color: #ffffff;
}
.input-box:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.input-box:disabled {
  background-color: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}
.input-box::placeholder {
  color: #94a3b8;
  font-size: 14px;
}

/* æŒ‰é’®é€šç”¨æ ·å¼ */
.btn {
  width: 120px;
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.submit-input-btn {
  width: 110px !important;
  height: 42px !important;
  flex: none !important;
  padding: 0 15px !important;
  font-size: 15px !important;
}
.submit-input-btn .icon {
  width: 20px !important;
  height: 20px !important;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s ease;
}
.btn:hover::after {
  left: 100%;
}

/* å›¾æ ‡æ ·å¼ */
.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-clear {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}
.icon-submit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2.01 21L15 13.4 23 21V5H2.01V21zM17 15l-5-5-5 5V7h10v8z'/%3E%3C/svg%3E");
}

/* æŒ‰é’®ä¸»é¢˜æ ·å¼ */
.clear-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  padding: 0 12px;
}
.clear-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.15);
}
.save-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  padding: 0 12px;
}
.save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
}

/* ä¿¡å·ç¯æ ·å¼ */
.signal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 60px;
}
.signal-label {
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
  text-align: center;
  font-weight: 600;
}
.signal-light {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signal-light-inner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  opacity: 0.9;
  transition: all 0.3s ease;
}
.signal-active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.7);
  animation: pulse 2s infinite;
}
.signal-inactive {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* è‡ªå®šä¹‰å¤é€‰æ¡†æ ·å¼ */
.checkbox-container {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #334155;
  flex-shrink: 0;
}
.part-checkbox {
  display: none;
}
.checkbox-container:has(.part-checkbox:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}
.checkmark {
  width: 22px;
  height: 22px;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
}
.part-checkbox:checked ~ .checkmark {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.part-checkbox:checked ~ .checkmark:after {
  display: block;
}
.checkbox-label {
  font-size: 13px;
  color: #475569;
  width: 50px;
}

/* å“åº”式适配 */
@media (max-width: 1200px) {
  .container {
    flex-direction: column;
    height: auto;
  }
  .left-area,
  .right-area {
    width: 100%;
    flex: none;
  }
  .signal-status {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .form-row,
  .input-submit-row {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    line-height: normal;
  }
  .label {
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
  }
  .input-box {
    width: 100%;
  }
  .btn,
  .submit-input-btn {
    width: 100% !important;
    margin-top: 6px;
  }
  .right-bottom .finished-product-row {
    margin-top: 0 !important;
  }
}
</style>