样式调整

frontend/src/views/home/components/channelsTest.vue

@@ -1,7 +1,6 @@
 <template>
-  <div>
-    <div class="test-dialog">
-
+  <el-dialog v-model='dialogVisible' title="系数校准"  width="1200px" height="1000px">
+    <div class="test-dialog" >
       <div class="dialog-content">
 
         <div class="right-title">
@@ -46,18 +45,24 @@
       </div>
 
     </div>
-  </div>
-
+      <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit">开始系数校准</el-button>
+      </div>
+      </template>
+  </el-dialog>
+       
 </template>
 <script lang="tsx" setup name="channelsTest">
 import { SuccessFilled, Failed } from '@element-plus/icons-vue'
+import { ref, toRef, watch } from 'vue'
 
 const activeIndex = ref(0)
 const activeTotalNum = ref(4)
 const qualified = ref(0)
 const outputDsc = ref('电压误差为：±0.1Un%； 电流误差为：±0.5%')
 const total = ref(0)
-
+const dialogVisible = ref(false)
 const activities = [
   {
     content: '开始检测',
@@ -305,41 +310,58 @@ const tableData4 = ref([
 ])
 const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
 
-const props = defineProps({
-  testStatus: {
-    type: String,
-    default: 'wait'
-  }
-})
-const testStatus = toRef(props, 'testStatus');
-const ts = ref('');
-//监听goods_sn的变化
-watch(testStatus, function (newValue, oldValue) {
-  ts.value = props.testStatus;
-  if (ts.value === 'start') {
-    ts.value = 'process'
 
-    let timer = setInterval(() => {
-      if (activeIndex.value < activeTotalNum.value) {
-        activeIndex.value++
-        if(activeIndex.value > 1)
-        qualified.value = activeIndex.value -1;//演示效果，实际运行时使用后端传来的真实数据即可
-        else
-        qualified.value = activeIndex.value;
-      }
-      else if (activeIndex.value === activeTotalNum.value) {
-        clearInterval(timer)
-        ts.value = 'success'
-      }
-      else {
-        clearInterval(timer)
-        ts.value = 'success'
-      }
-
-      total.value = activeTotalNum.value
-    }, 1000);
+  // 打开弹窗，可能是新增，也可能是编辑
+  const open = () => {
+    dialogVisible.value = true;
+    activeIndex.value = 1
   }
-})
+
+// const props = defineProps({
+//   testStatus: {
+//     type: String,
+//     default: 'wait'
+//   }
+// })
+// const testStatus = toRef(props, 'testStatus');
+// const ts = ref('');
+// //监听goods_sn的变化
+// watch(testStatus, function (newValue, oldValue) {
+  
+//   ts.value = props.testStatus;
+//   if (ts.value === 'start') {
+//     ts.value = 'process'
+//     let timer = setInterval(() => {
+//       if (activeIndex.value < activeTotalNum.value) {
+//         activeIndex.value++
+//         if(activeIndex.value > 1)
+//         qualified.value = activeIndex.value -1;//演示效果，实际运行时使用后端传来的真实数据即可
+//         else
+//         qualified.value = activeIndex.value;
+//       }
+//       else if (activeIndex.value === activeTotalNum.value) {
+//         clearInterval(timer)
+//         ts.value = 'success'
+//       }
+//       else {
+//         clearInterval(timer)
+//         ts.value = 'success'
+//       }
+
+//       total.value = activeTotalNum.value
+//     }, 1000);
+//   }
+// })
+
+
+
+// const emit = defineEmits(['update:testStatus']);
+// //监听sn
+// watch(ts, function (newValue, oldValue) {
+//   //修改父组件
+//   emit('update:testStatus', ts.value)
+// })
+
 
 watch(activeIndex, function (newValue, oldValue) {
 
@@ -350,13 +372,32 @@ if(activeIndex.value === 1)
 
 })
 
-const emit = defineEmits(['update:testStatus']);
-//监听sn
-watch(ts, function (newValue, oldValue) {
-  //修改父组件
-  emit('update:testStatus', ts.value)
-})
+const handleSubmit = () => {
+    let timer = setInterval(() => {
+      if (activeIndex.value < activeTotalNum.value) {
+        activeIndex.value++
+        if(activeIndex.value > 1)
+        qualified.value = activeIndex.value -1;//演示效果，实际运行时使用后端传来的真实数据即可
+        else
+        qualified.value = activeIndex.value;
+      }
+      else if (activeIndex.value === activeTotalNum.value) {
+        clearInterval(timer)
+      }
+      else {
+        clearInterval(timer)
+      }
 
+      total.value = activeTotalNum.value
+    }, 1000);
+  
+};
+
+ // 对外映射
+ defineExpose({ open })
+ 
+
+  
 </script>
 <style scoped>
 .right-title {