ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

预检测

Browse Source
This commit is contained in:
sjl
2025-08-06 15:18:27 +08:00
parent 83998f88ac
commit d0724cb7f6
12 changed files with 739 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
frontend/src/views/home/components/compareTest.vue Normal file
View File

@@ -0,0 +1,237 @@
<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>