134 lines
3.7 KiB
Vue
134 lines
3.7 KiB
Vue
|
<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>
|