通道配对，预检测界面

2025-08-05 10:37:40 +08:00
parent 0079f7415e
commit 9c5e54507b
14 changed files with 1550 additions and 343 deletions
--- a/frontend/src/views/home/components/realTimeDataAlign.vue
+++ b/frontend/src/views/home/components/realTimeDataAlign.vue
@@ -0,0 +1,134 @@
+<template>
+  <el-dialog title="实时数据详情" v-model='dialogVisible' @close="handleClose" v-bind="dialogBig" >
+    <el-tabs v-model="activeTab" type="card">
+      <el-tab-pane label="被检设备1" name="channel1">
+        <div class="table-toolbar">
+          <el-form-item label="被检设备通道号" prop="createId">
+               <el-select v-model="timeRange" placeholder="选择时间范围" style="width: 150px;">
+                  <el-option label="通道1" value="1"></el-option>
+                  <el-option label="通道2" value="2"></el-option>
+                  <el-option label="通道3" value="3"></el-option>
+                  <el-option label="通道4" value="4"></el-option>
+               </el-select>
+          </el-form-item>    
+          <el-button type="primary" @click="exportData">导出数据</el-button>
+        </div>
+        <el-table 
+          :data="tableData" 
+          :header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
+          :cell-style="{ textAlign: 'center' }"
+          style="width: 100%"
+          :style="{ height: '400px',maxHeight: '400px',overflow:'hidden'}">
+          <el-table-column prop="monitorNum" label="数据时标" width="180"/>
+          <el-table-column label="被检设备1-通道1">
+            <el-table-column prop="Ua" label="A相(V)">
+            </el-table-column>
+            <el-table-column prop="Ub" label="B相(V)">
+            </el-table-column>
+            <el-table-column prop="Uc" label="C相(V)">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="标准设备-通道1">
+            <el-table-column prop="Ua" label="A相(V)">
+            </el-table-column>
+            <el-table-column prop="Ub" label="B相(V)">
+            </el-table-column>
+            <el-table-column prop="Uc" label="C相(V)">
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+       <el-tab-pane label="被检设备2" name="channel2"></el-tab-pane>
+    </el-tabs>
+  </el-dialog>
+</template>
+
+<script setup lang='tsx' name='realTimeDataAlign'>
+import { dialogBig } from "@/utils/elementBind";
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+const dialogVisible = ref(false);
+const activeTab = ref('channel1');
+const timeRange = ref('1');
+
+
+// 表格数据示例
+const tableData = ref([
+  {
+    monitorNum: '2023-05-20 10:30:01',
+    Ua: '220.5V',
+    Ub: '219.8V',
+    Uc: '220.2V',
+    Ia: '4.98A',
+    Ib: '5.01A',
+    Ic: '4.99A'
+  },
+  {
+    monitorNum: '2023-05-20 10:30:04',
+    Ua: '220.3V',
+    Ub: '220.1V',
+    Uc: '219.9V',
+    Ia: '5.02A',
+    Ib: '4.99A',
+    Ic: '5.00A'
+  },
+    {
+    monitorNum: '2023-05-20 10:30:07',
+    Ua: '220.5V',
+    Ub: '219.8V',
+    Uc: '220.2V',
+    Ia: '4.98A',
+    Ib: '5.01A',
+    Ic: '4.99A'
+  },
+  {
+    monitorNum: '2023-05-20 10:30:10',
+    Ua: '220.3V',
+    Ub: '220.1V',
+    Uc: '219.9V',
+    Ia: '5.02A',
+    Ib: '4.99A',
+    Ic: '5.00A'
+  }
+]);
+
+const open = async () => {
+  dialogVisible.value = true;
+};
+
+// 刷新数据
+const refreshData = () => {
+  ElMessage.info('正在刷新数据...');
+  // 这里可以添加实际的数据刷新逻辑
+};
+
+// 导出数据
+const exportData = () => {
+  ElMessage.success('数据导出成功');
+  // 这里可以添加实际的数据导出逻辑
+};
+
+// 关闭弹窗
+const handleClose = () => {
+  dialogVisible.value = false;
+};
+
+defineExpose({ open });
+</script>
+
+<style scoped lang="scss">
+.table-toolbar {
+  display: flex;
+  justify-content: space-between; // 关键修改：将子元素分布到两端
+}
+
+// 移除这个样式，避免影响布局
+// .table-toolbar .el-button {
+//   margin-right: 10px;
+// }
+
+:deep(.el-dialog__body) {
+  padding: 10px 20px 20px 20px;
+}
+</style>