237 lines
6.6 KiB
Vue
237 lines
6.6 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="dialog" v-bind="dialogBig">
|
|||
|
|
<div class="dialog-title">
|
|||
|
|
<div class="timeView">
|
|||
|
|
<el-icon style="margin: 0px 5px;">
|
|||
|
|
<Clock/>
|
|||
|
|
</el-icon>
|
|||
|
|
<span>检测用时：{{ timeView }}</span>
|
|||
|
|
</div>
|
|||
|
|
<el-progress style="width: 82%; margin-right: 3%;"/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="dialog-content">
|
|||
|
|
<!-- 外层 Tabs -->
|
|||
|
|
<el-tabs type="card">
|
|||
|
|
<el-tab-pane label="被检设备1">
|
|||
|
|
<!-- 内层 Tabs 和按钮 -->
|
|||
|
|
<div class="form-container">
|
|||
|
|
<el-form-item label="被检设备通道号" prop="createId">
|
|||
|
|
<el-select v-model="selectedChannel" placeholder="选择通道" style="width: 150px;">
|
|||
|
|
<el-option value="1" />
|
|||
|
|
<el-option value="2"/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="谐波次数" prop="createId">
|
|||
|
|
<el-select v-model="selectedChannel2" placeholder="选择通道" style="width: 150px;">
|
|||
|
|
<el-option value="2" />
|
|||
|
|
<el-option value="3"/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="间谐波次数" prop="createId">
|
|||
|
|
<el-select v-model="selectedChannel3" placeholder="选择通道" style="width: 150px;">
|
|||
|
|
<el-option value="0.5" />
|
|||
|
|
<el-option value="1.5"/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-tabs type="border-card">
|
|||
|
|
<el-tab-pane label="频率">
|
|||
|
|
<!-- 表格 -->
|
|||
|
|
<el-table :data="tableData" style="width: 100%" height="250"
|
|||
|
|
:header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
|
|||
|
|
:cell-style="{ textAlign: 'center' }">
|
|||
|
|
<el-table-column prop="date" label="数据时间" />
|
|||
|
|
<el-table-column label="被检设备1-通道1"/>
|
|||
|
|
<el-table-column label="标准设备1-通道1" />
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="电压">
|
|||
|
|
<el-table :data="tableData" style="width: 100%" height="250"
|
|||
|
|
:header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
|
|||
|
|
:cell-style="{ textAlign: 'center' }">
|
|||
|
|
<el-table-column prop="date" label="数据时间" />
|
|||
|
|
<el-table-column label="被检设备1-通道1">
|
|||
|
|
<el-table-column label="A相"/>
|
|||
|
|
<el-table-column label="B相"/>
|
|||
|
|
<el-table-column label="C相"/>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="标准设备1-通道1">
|
|||
|
|
<el-table-column label="A相"/>
|
|||
|
|
<el-table-column label="B相"/>
|
|||
|
|
<el-table-column label="C相"/>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="谐波电压">
|
|||
|
|
<el-table :data="tableData" style="width: 100%" height="250"
|
|||
|
|
:header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
|
|||
|
|
:cell-style="{ textAlign: 'center' }">
|
|||
|
|
<el-table-column prop="date" label="数据时间" />
|
|||
|
|
<el-table-column label="被检设备1-通道1">
|
|||
|
|
<el-table-column label="A相"/>
|
|||
|
|
<el-table-column label="B相"/>
|
|||
|
|
<el-table-column label="C相"/>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="标准设备1-通道1">
|
|||
|
|
<el-table-column label="A相"/>
|
|||
|
|
<el-table-column label="B相"/>
|
|||
|
|
<el-table-column label="C相"/>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<el-tab-pane label="被检设备2">
|
|||
|
|
<p>这是第二个主标签页的内容</p>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="tsx" setup name="test">
|
|||
|
|
import { ref } from 'vue';
|
|||
|
|
import { dialogBig } from '@/utils/elementBind';
|
|||
|
|
import { Clock } from '@element-plus/icons-vue';
|
|||
|
|
|
|||
|
|
const timeView = ref('00:00:00');
|
|||
|
|
const selectedChannel = ref('1'); // 设置默认选中第一个选项
|
|||
|
|
const selectedChannel2 = ref('2'); // 设置默认选中第一个选项
|
|||
|
|
const selectedChannel3 = ref('0.5'); // 设置默认选中第一个选项
|
|||
|
|
|
|||
|
|
// 示例表格数据
|
|||
|
|
const tableData = ref([
|
|||
|
|
{
|
|||
|
|
date: '2025-08-06 ',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
date: '2023-10-02',
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
/* 其他样式保持不变 */
|
|||
|
|
|
|||
|
|
.form-container {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px; /* 设置元素之间的间距 */
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
flex-wrap: wrap; /* 允许换行 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 当屏幕宽度较小时，表单项换行显示 */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.form-container {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 其他原有样式保持不变 */
|
|||
|
|
:deep(.el-table .header-row) {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-table .warning-row) {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-table .success-row {
|
|||
|
|
--el-table-tr-bg-color: var(--el-color-success-light-9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow-y: hidden;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-title {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
|
|||
|
|
.timeView {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #91cc75;
|
|||
|
|
width: 28%;
|
|||
|
|
margin-right: 0px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-size: 26px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-content {
|
|||
|
|
max-height: 450px;
|
|||
|
|
overflow-y: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-collapse-item__header) {
|
|||
|
|
height: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-log {
|
|||
|
|
height: 50px;
|
|||
|
|
overflow-y: hidden;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
margin: 5px 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.drawer-container {
|
|||
|
|
:deep(header.el-drawer__header) {
|
|||
|
|
color: #fff !important;
|
|||
|
|
background-color: var(--el-color-primary) !important;
|
|||
|
|
|
|||
|
|
.el-drawer__close-btn svg:hover {
|
|||
|
|
color: #ccc !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-drawer__title {
|
|||
|
|
color: #fff !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-box {
|
|||
|
|
animation: loading 1.5s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes loading {
|
|||
|
|
from {
|
|||
|
|
transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
:deep(.el-button--small) {
|
|||
|
|
height: 20px !important;
|
|||
|
|
width: 20px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-table--default td ) {
|
|||
|
|
padding: 5px 0 !important;
|
|||
|
|
}
|
|||
|
|
</style>
|