update code

.gitignore

@@ -25,3 +25,4 @@ A8000-plus.*
 *.sln
 *.sw?
 components.d.ts
+auto-imports.d.ts

src/pages/Index/components/Consumables/ChangeNum.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <!-- 使用 teleport 渲染到 body -->
+    <teleport to="body">
+      <div v-if="isOpen" class="modal-overlay">
+        <div class="modal">
+          <div class="modal-header">
+            <span class="modal-title">{{ dialogTitle }}</span>
+            <button class="close-btn" @click="handleCancel">X</button>
+          </div>
+
+          <!-- 主体内容 -->
+          <div class="modal-body">
+            <div class="input-box">
+              <input id="slider" type="range" v-model="value" @change="handleSliderChange" min="0" max="25" step="1"
+                class="slider" />
+              <div class="change-num">
+                <button class="minus" @click="handleMinus">-</button>
+                <input type="text" v-model="value" class="input" />
+                <button class="plus" @click="handlePlus">+</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部按钮 -->
+          <div class="modal-footer">
+            <button class="footer-btn" @click="handleCancel">取消</button>
+            <button class="footer-btn primary" @click="handleConfirm">
+              确认
+            </button>
+          </div>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { updateConsumables } from '../../../../services'
+import { eventBus } from '../../../../eventBus'
+import { useDeviceStore } from '../../../../store/index'
+
+const deviceStore = useDeviceStore()
+const isOpen = ref(false)
+const value = ref(0)
+const title = ref('')
+const dialogTitle = ref(`请选择${title.value || ''}数值`)
+const plateIndex = ref(0)
+
+// 使用计算属性来保持 query 与 value 的同步
+const query = ref({
+  group: '',
+  num: 0
+})
+
+// 监听 value 的变化，同步更新 query
+watch(value, (newVal) => {
+  query.value = {
+    group: `CG${ plateIndex.value } `,
+    num: Number(newVal)
+  }
+})
+
+const handleSliderChange = (e) => {
+  value.value = Number(e.target.value)
+}
+
+// 打开对话框
+const openDialog = (plate, index) => {
+  isOpen.value = true
+  value.value = Number(plate.num)
+  plateIndex.value = index
+  title.value = plate.projShortName || ''
+  dialogTitle.value = `请选择${ title.value } 数值`
+  
+  // 初始化 query
+  query.value = {
+    group: `CG${index}`,
+    num: Number(plate.num)
+}
+}
+
+  defineExpose({
+    openDialog,
+  })
+
+const handleCancel = () => {
+  isOpen.value = false
+}
+
+const handlePlus = () => {
+  if (value.value < 25) {
+    value.value = Number(value.value) + 1
+  }
+}
+
+const handleMinus = () => {
+  if (value.value > 0) {
+    value.value = Number(value.value) - 1
+  }
+}
+
+// 处理确认按钮
+const handleConfirm = async () => {
+  if (deviceStore.status === 'IDLE') {
+    try {
+      const res = await updateConsumables(query.value)
+      if (res.success) {
+        eventBus.emit('confirm', {
+          value: Number(value.value),
+          index: plateIndex.value,
+        })
+        isOpen.value = false
+      }
+    } catch (error) {
+      console.error('更新失败:', error)
+    }
+  } else {
+    ElMessage.error('设备正在工作，无法修改数值')
+  }
+}
+</script>
+
+<style scoped lang="less">
+/* 背景遮罩 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+/* 对话框容器 */
+.modal {
+  background-color: white;
+  border-radius: 8px;
+  width: 700px;
+  padding: 20px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  font-size: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* 对话框标题 */
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+/* 关闭按钮 */
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+/* 对话框主体内容 */
+.modal-body {
+  width: 100%;
+  margin-bottom: 20px;
+
+  .input-box {
+    display: flex;
+    align-items: center;
+
+    /* Slider 样式 */
+    .slider {
+      width: 70%;
+      margin: 10px 0;
+    }
+
+    .change-num {
+      width: 30%;
+      border: 1px solid #ccc;
+      display: flex;
+      justify-content: space-around;
+      margin-left: 20px;
+
+      button {
+        width: 52px;
+        height: 46px;
+        background-color: #f5f7fa;
+        font-size: 26px;
+      }
+
+      .minus {
+        border-right: 1px solid #ccc;
+      }
+
+      .plus {
+        border-left: 1px solid #ccc;
+      }
+
+      .input {
+        width: 100px;
+        outline-color: #66b1ff;
+        border: none;
+        font-size: 32px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+/* 底部按钮 */
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+
+  .footer-btn {
+    width: 100px;
+    height: 60px;
+    margin-left: 10px;
+    font-size: 26px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+  }
+
+  .primary {
+    background-color: #409eff;
+    color: white;
+  }
+
+  .primary:hover {
+    background-color: #66b1ff;
+  }
+
+  .footer-btn:hover {
+    background-color: #f1f1f1;
+  }
+}
+</style>