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:
GYYM
2024-11-21 23:02:43 +08:00
parent eedf3f00c1
commit 44f8d43775
15 changed files with 2236 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/api/plan/autoTest.json
View File

@@ -2,7 +2,7 @@
"code": "A0000",
"data": [
{
"id": 0,
"id": "0",
"name": "频率准确度检测",
"children": [
{
@@ -78,7 +78,7 @@
]
},
{
"id": 1,
"id": "1",
"name": "电压准确度检测",
"children": [
{
@@ -155,7 +155,7 @@
},
{
"id": 2,
"id": "2",
"name": "谐波准确度检测",
"children": [
{

100
frontend/src/views/home/components/channelsTest.vue
View File

@@ -3,22 +3,24 @@
<div class = "test-dialog">
<div class="dialog-content">
<div>当前源输出为：Ua=Ub=Uc=57.74V Ia=Ib=Ic=1A</div>
<div class="right-title">
<div>系数校准表</div>
<!-- <div>系数校准表</div> -->
<div>当前源输出为：Ua=Ub=Uc=57.74V Ia=Ib=Ic=1A</div>
<div>
<el-button type="primary" loading>通道系数已校准2台/共4台</el-button>
<el-button type="primary" loading v-if="activeIndex > 0 && activeIndex < activeTotalNum">通道系数已校准3台/共3台</el-button>
<el-button type="primary" disabled="true" v-if="activeIndex === activeTotalNum">通道系数已校准3台/共3台</el-button>
</div>
</div>
<div class="right-content">
<el-tabs type="border-card">
<el-tab-pane label="被检设备1">
<el-tab-pane label="被检设备1" v-if="activeIndex > 0">
<channelsTestTable></channelsTestTable>
</el-tab-pane>
<el-tab-pane label="被检设备2">
<el-tab-pane label="被检设备2" v-if="activeIndex > 1 ">
<channelsTestTable></channelsTestTable>
</el-tab-pane>
<el-tab-pane label="被检设备3">
<el-tab-pane label="被检设备3" v-if="activeIndex > 2 ">
<channelsTestTable></channelsTestTable>
</el-tab-pane>
</el-tabs>
@@ -34,7 +36,7 @@
import { SuccessFilled } from '@element-plus/icons-vue'
const activeIndex = ref(0)
const activeTotalNum = ref(5)
const activeTotalNum = ref(3)
const activities = [
@@ -67,33 +69,6 @@ const activities = [
},
]
const errorData = ref([
{
deviceName: '被检设备1',
updataTime: '10:30:08.136',
ErrorValue:'148',
Result: '合格',
},
{
deviceName: '被检设备2',
updataTime: '10:30:08.136',
ErrorValue:'136',
Result: '合格',
},
{
deviceName: '被检设备3',
updataTime: '10:30:09.006',
ErrorValue:'1006',
Result: '不合格',
},
{
deviceName: '被检设备4',
updataTime: '10:30:08.736',
ErrorValue:'736',
Result: '合格',
},
])
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
const props = defineProps({
@@ -128,6 +103,60 @@ if(ts.value==='start')
}, 1000);
}
})
// watch(activeIndex, function (newValue, oldValue) {
// if(activeIndex.value === 1)
// {
// activities.value.length = 0;
// activities.value.push({
// content: '开始检测',
// timestamp: '2018-04-12 20:46',
// size: 'large',
// color: '#0bbd87',
// icon: SuccessFilled,
// });
// }
// if(activeIndex.value === 2)
// {
// activities.value.push({
// content: 'GPS上送时刻',
// timestamp: '2018-04-03 20:46',
// color: '#0bbd87',
// icon: SuccessFilled,
// size: 'large',
// });
// }
// if(activeIndex.value === 3)
// {
// activities.value.push({
// content: '设备最早上送时刻',
// timestamp: '2018-04-03 20:46',
// color: '#0bbd87',
// icon: SuccessFilled,
// size: 'large',
// });
// deviceOperatorData.value.length = 0;
// deviceOperatorData.value = deviceData.value;
// }
// if(activeIndex.value > 3)
// {
// activities.value.push({
// content: '设备最晚上送时刻',
// timestamp: '2018-04-03 20:46',
// color: '#0bbd87',
// icon: SuccessFilled,
// size: 'large',
// });
// activities.value.push({
// content: '检测结束',
// timestamp: '2018-04-03 20:46',
// color: '#0bbd87',
// icon: SuccessFilled,
// size: 'large',
// });
// }
// })
const emit = defineEmits(['update:testStatus']);
//监听sn
@@ -146,4 +175,7 @@ emit('update:testStatus',ts.value)
justify-content: space-between;
margin-bottom: 10px;
}
.right-content{
min-height: 400px;
}
</style>

6
frontend/src/views/home/components/channelsTestTable.vue
View File

@@ -30,8 +30,10 @@
</el-table-column>
</el-table-column>
<el-table-column prop="Result" label="校准结果">
<el-table-column label="校准结果">
<template #default="scope">
<el-tag :type="scope.row.Result === '合格' ? 'success' : 'danger'">{{ scope.row.Result }}</el-tag>
</template>
</el-table-column>
</el-table>

1138
frontend/src/views/home/components/dataCheckChangeErrSysPopup.vue
View File

File diff suppressed because it is too large Load Diff

32
frontend/src/views/home/components/dataCheckPopup.vue
View File

@@ -2,18 +2,31 @@
<el-dialog title="数据查询" :model-value='visible' @close="handleCancel" v-bind="dialogBig">
<div class="data-check-dialog">
<div class="data-check-title">
<el-form :model='formContent'>
<el-row :gutter="24" >
<el-col :span="8">
<el-form-item label="检测脚本:" >
<el-input v-model='testScriptName' :disabled="true"/>
</el-form-item>
<el-form-item label="误差体系" >
</el-col>
<el-col :span="8">
<el-form-item label="误差体系:" >
<el-input v-model='errorSysName' :disabled="true"/>
</el-form-item>
<el-form-item label="数据处理原则" >
</el-col>
<el-col :span="8">
<el-form-item label="数据处理原则:" >
<el-input v-model='dataRule' :disabled="true"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" >
<el-col :span="8">
<el-form-item label="设备名称:" >
<el-input v-model='deviceName' :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label='通道号:'>
<el-select v-model="monitorIdx">
<el-option
@@ -24,6 +37,9 @@
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="data-check-content">
<div class="content-left-tree">
@@ -32,14 +48,15 @@
v-model="scriptSwitch"
class="ml-2"
inline-prompt
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
style="--el-switch-on-color: #003078; --el-switch-off-color: #5a79a9"
active-text="仅显示不合格测试项"
inactive-text="显示全部测试项"
/>
</div>
<div>
<el-tree
default-expand-all
:default-expanded-keys="['0','1']"
node-key="id"
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
@@ -52,11 +69,11 @@
<span>{{currentScriptDsc}}</span>
</div>
<div class="content-right-Tabs">
<el-tabs type="border-card">
<el-tab-pane label="检测结果">
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="检测结果" name="resultTab">
<DataCheckResultTable></DataCheckResultTable>
</el-tab-pane>
<el-tab-pane label="原始数据">
<el-tab-pane label="原始数据" name="rawDataTab">
<DataCheckRawDataTable></DataCheckRawDataTable>
</el-tab-pane>
</el-tabs>
@@ -86,6 +103,7 @@ import { data } from "@/api/plan/autoTest.json";
import DataCheckResultTable from './dataCheckResultTable.vue'
import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
const activeName = ref('rawDataTab')
const deviceName = ref('被检设备1');
const monitorIdx = ref('1');
const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');

100
frontend/src/views/home/components/dataCheckRawDataTable.vue
View File

@@ -1,8 +1,7 @@
<template>
<div class="table-container">
<el-table :data="tableData" stripe height="300" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" >
<el-table :data="tableData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" height="310px" style="width: 100%" >
<el-table-column prop="id" label="序号" width="70" />
<el-table-column prop="updateTime" label="数据时间" />
<el-table-column prop="L1" label="L1" />
@@ -94,39 +93,84 @@ const tableData = ref([
L2:57.73,
L3:57.73,
},
{
id: 11,
updateTime: "2024-10-10 09:30:30",
L1:57.73,
L2:57.73,
L3:57.73,
},
{
id: 12,
updateTime: "2024-10-10 09:30:33",
L1:57.73,
L2:57.73,
L3:57.73,
},
{
id: 13,
updateTime: "2024-10-10 09:30:36",
L1:57.73,
L2:57.73,
L3:57.73,
},
{
id: 14,
updateTime: "2024-10-10 09:30:39",
L1:57.73,
L2:57.73,
L3:57.73,
},
{
id: 15,
updateTime: "2024-10-10 09:30:42",
L1:57.73,
L2:57.73,
L3:57.73,
},
{
id: 16,
updateTime: "2024-10-10 09:30:45",
L1:57.73,
L2:57.73,
L3:57.73,
},
{
id: 17,
updateTime: "2024-10-10 09:30:48",
L1:57.73,
L2:57.73,
L3:57.73,
},
{
id: 18,
updateTime: "2024-10-10 09:30:51",
L1:57.73,
L2:57.73,
L3:57.73,
},
{
id: 19,
updateTime: "2024-10-10 09:30:54",
L1:57.73,
L2:57.73,
L3:57.73,
},
{
id: 20,
updateTime: "2024-10-10 09:30:57",
L1:57.73,
L2:57.73,
L3:57.73,
},
])
</script>
<style scoped>
.form-grid {
display: flex;
flex-direction: row; /* 横向排列 */
flex-wrap: wrap; /* 允许换行 */
}
.form-grid .el-form-item {
flex: 1 1 30%; /* 控件宽度 */
margin-right: 20px; /* 控件间距 */
}
.form-grid .el-form-item:last-child {
margin-right: 0; /* 最后一个控件不需要右边距 */
}
.dialog-footer {
display: flex;
justify-content: flex-start;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
}
.el-tabs {
margin-bottom: 20px; /* 添加底部边距 */
}
.el-table th, .el-table td {
text-align: center; /* 所有单元格文字居中 */
}
.table-container {
max-height: 400px; /* 根据需要调整高度 */
max-height: 320px; /* 根据需要调整高度 */
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 隐藏水平滚动条 */
}

4
frontend/src/views/home/components/dataCheckResultTable.vue
View File

@@ -31,6 +31,9 @@
</el-table-column>
</el-table-column>
<el-table-column prop="maxErrVaule" label="最大误差">
</el-table-column>
<el-table-column prop="Result" label="检测结果">
</el-table-column>
@@ -60,6 +63,7 @@ const tableData = ref([
L2_errValue: 0.01,
L3:57.73,
L3_errValue: 0.01,
maxErrVaule: 0.05774,
Result: '合格',
},

53
frontend/src/views/home/components/dataCheckSingleChannelSingleTestPopup.vue
View File

@@ -1,22 +1,12 @@
<template>
<el-dialog title="数据查询" :model-value='visible' @close="handleCancel" v-bind="dialogBig">
<el-dialog title="数据查询" :model-value='visible' @close="handleCancel" v-bind="dialogBig" width="950px">
<div class="data-check-dialog">
<div class="data-check-title">
<el-form-item label="检测脚本:" >
<el-input v-model='testScriptName' :disabled="true"/>
</el-form-item>
<el-form-item label="误差体系" >
<el-input v-model='errorSysName' :disabled="true"/>
</el-form-item>
<el-form-item label="数据处理原则" >
<el-input v-model='dataRule' :disabled="true"/>
</el-form-item>
<el-form-item label="设备名称:" >
<el-input v-model='deviceName' :disabled="true"/>
</el-form-item>
<el-form-item label="通道号:" >
<el-input v-model='monitorIdx' :disabled="true"/>
</el-form-item>
<!-- <el-form-item label='通道号:'>
<el-select v-model="monitorIdx">
<el-option
@@ -35,11 +25,11 @@
<span>{{currentScriptDsc}}</span>
</div>
<div class="content-right-Tabs">
<el-tabs type="border-card">
<el-tab-pane label="检测结果">
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="检测结果" name="resultTab">
<DataCheckResultTable></DataCheckResultTable>
</el-tab-pane>
<el-tab-pane label="原始数据">
<el-tab-pane label="原始数据" name="rawDataTab">
<DataCheckRawDataTable></DataCheckRawDataTable>
</el-tab-pane>
</el-tabs>
@@ -69,6 +59,7 @@ import { data } from "@/api/plan/autoTest.json";
import DataCheckResultTable from './dataCheckResultTable.vue'
import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
const activeName = ref('rawDataTab')
const deviceName = ref('被检设备1');
const monitorIdx = ref('1');
const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
@@ -127,30 +118,34 @@ const props = defineProps<{
.data-check-dialog{
display: flex;
flex-direction: column;
width: 100%;
}
.data-check-title{
display: flex;
flex-direction: row;
margin-top: 10px;
margin-top: 5px;
width: 100%;
}
.data-check-content{
display: flex;
flex-direction: row;
width: 100%;
}
.content-left-tree{
width: 20%;
}
.content-left-tree-switch{
text-align: right;
margin-right: 10px;
}
.content-right{
margin-left: 20px;
width: 100%;
}
.content-right-title{
margin-bottom: 10px;
}
.content-right-Tabs{
margin-top: 15px;
box-sizing: border-box;
margin-top: 20px;
margin-bottom: 10px;
max-height: 400px;
}
</style>

200
frontend/src/views/home/components/matchPopup.vue Normal file
View File

@@ -0,0 +1,200 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog :model-value="visible" title="被检监测点匹配" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
<div>
<el-form :model="formData" ref='formRuleRef' :rules='rules'>
<el-form-item label="监测点名称：" :label-width="100">
<el-tree-select v-model="value" :data="sourcesList" style="width: 240px" />
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit" :disabled="isReadOnly">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import{ElMessage, FormInstance,FormItemRule}from'element-plus'
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
import { dialogSmall} from '@/utils/elementBind'
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,sourceDataList,deviceDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData'
const value = ref()
const sourcesList = [
{
value: '1',
label: '高精度设备-PQV520-1',
disabled: true,
children: [
{
value: '1-1',
label: '监测点1',
disabled: true,
},
{
value: '1-2',
label: '监测点2',
disabled: true,
},
],
},
{
value: '2',
label: '高精度设备-PQV520-2',
children: [
{
value: '2-1',
label: '监测点1',
},
{
value: '2-2',
label: '监测点2',
},
],
},
{
value: '3',
label: '高精度设备-PQV520-3',
disabled: true,
children: [
{
value: '3-1',
label: '监测点1',
disabled: true,
},
{
value: '3-2',
label: '监测点2',
disabled: true,
},
],
},
{
value: '4',
label: '高精度设备-PQV520-4',
children: [
{
value: '4-1',
label: '监测点1',
},
{
value: '4-2',
label: '监测点2',
},
],
},
]
const props = defineProps<{
visible: boolean;
dialogTitle: string;
isReadOnly: boolean,
formData: {
id:string;
name: string;
pattern: string; //模式，字典表（数字、模拟、比对）
father_Plan_Id: string; //父计划ID
source_Id: string;//检测源ID
dataSource_Id: string; //数据源ID
script_Id: string; //检测脚本ID
error_Sys_Id: string;//误差体系ID
device_Id: string;//被检设备ID
test_State: string; //检测状态
report_State: string; //报告生成状态
result: string;//检测结果
state: number; //状态
};
}>();
const fatherPlanList = [
{ label: '/', value: 'type0' },
{ label: '检测计划1', value: 'type1' },
{ label: '检测计划2', value: 'type2' },
{ label: '检测计划3', value: 'type3' },
{ label: '检测计划4', value: 'type4' },
];
const sourceList = [
{ label: '分钟统计数据最大值', value: 'type0' },
{ label: '分钟统计数据最大值', value: 'type1' },
{ label: '分钟统计数据CP95值', value: 'type2' },
];
const scriptList = [
{ label: '/', value: 'type0' },
{ label: '国网入网检测脚本（单影响量-模拟式）', value: 'type1' },
{ label: '国网入网检测脚本（Q/GDW 10650.4 - 2021) 数字式', value: 'type1' },
];
const errorList = [
{ label: 'Q/GDW 1650.2- 2016', value: 'type0' },
{ label: 'Q/GDW 10650.2 - 2021', value: 'type1' },
];
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
// 定义规则
const formRuleRef = ref<FormInstance>()
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '检测计划名称必填！', trigger: 'blur' }],
source_Id: [{ required: true, message: '检测源必选！', trigger: 'blur' }],
dataSource_Id: [{ required: true, message: '数据源必选！', trigger: 'blur' }],
script_Id: [{ required: true, message: '检测脚本必选！', trigger: 'blur' }],
error_Sys_Id: [{ required: true, message: '误差体系必选！', trigger: 'blur' }],
// name: [{ required: true, message: '检测计划名称必填！', trigger: 'blur' }],
// father_Plan_Id: [{ required: true, message: '参照标准名称必填！', trigger: 'change' }],
});
const handleCancel = () => {
//重置表单内容
//取消表单校验状态
formRuleRef.value && formRuleRef.value.resetFields()
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
try {
formRuleRef.value?.validate((valid: boolean) => {
if (valid)
{
// 将表单数据转为json,发送到后端
let confirmFormData = JSON.parse(JSON.stringify(props.formData));
//console.log(confirmFormData)
emit('submit', props.formData); // 提交表单数据
emit('update:visible', false); // 提交后关闭对话框
}
else
{
ElMessage.error('请填选必填项！')
}
})
} catch (error) {
console.error('验证过程中发生错误', error)
}
};
// 当 props.visible 改变时，更新 formData
watch(() => props.visible, (newVal) => {
if (!newVal) {
// 这里可以重置表单数据，如果需要的话
}
});
</script>
<style scoped>
</style>

148
frontend/src/views/home/components/preTest.vue
View File

@@ -8,8 +8,10 @@
v-model="item.selected"
:key="index"
:label="item.name"
></el-checkbox
>
<!-- disabled="true" -->
</div>
</el-tab-pane>
</el-tabs>
@@ -28,22 +30,30 @@
<el-collapse v-model="collapseActiveName" accordion>
<el-collapse-item title="源通讯校验" name="1">
<div class = "div-log">
暂无数据，等待检测开始
<p v-for="(item, index) in step1InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
{{ item.log }} <br />
</p>
</div>
</el-collapse-item>
<el-collapse-item title="设备通讯校验" name="2">
<div class = "div-log">
暂无数据，等待检测开始
<p v-for="(item, index) in step2InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
{{ item.log }} <br />
</p>
</div>
</el-collapse-item>
<el-collapse-item title="协议校验" name="3">
<div class = "div-log">
暂无数据，等待检测开始
<p v-for="(item, index) in step3InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
{{ item.log }} <br />
</p>
</div>
</el-collapse-item>
<el-collapse-item title="相序校验" name="4">
<div class = "div-log">
暂无数据，等待检测开始
<p v-for="(item, index) in step4InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
{{ item.log }} <br />
</p>
</div>
</el-collapse-item>
</el-collapse>
@@ -53,6 +63,98 @@
</template>
<script lang="tsx" setup name="preTest">
const step1InitLog = ref([
{
type: 'info',
log:'暂无数据，等待检测开始',
},
])
const step1Log = ref([
{
type: 'info',
log:'源通讯校验成功',
},
])
const step2InitLog = ref([
{
type: 'info',
log:'暂无数据，等待检测开始',
},
])
const step2Log = ref([
{
type: 'info',
log:'被检设备1通讯校验成功',
},
{
type: 'info',
log:'被检设备2通讯校验成功',
},
{
type: 'info',
log:'被检设备3通讯校验成功',
},
{
type: 'info',
log:'被检设备4通讯校验成功',
},
])
const step3InitLog = ref([
{
type: 'info',
log:'暂无数据，等待检测开始',
},
])
const step3Log = ref([
{
type: 'info',
log:'被检设备1协议校验成功',
},
{
type: 'info',
log:'被检设备2协议校验成功',
},
{
type: 'info',
log:'被检设备3协议校验成功',
},
{
type: 'info',
log:'被检设备4协议校验成功',
},
])
const step4InitLog = ref([
{
type: 'info',
log:'暂无数据，等待检测开始',
},
])
const step4Log = ref([
{
type: 'info',
log:'被检设备1相序校验成功',
},
{
type: 'info',
log:'被检设备2相序校验成功',
},
{
type: 'info',
log:'被检设备3相序校验成功',
},
{
type: 'info',
log:'被检设备4相序校验成功',
},
])
const collapseActiveName = ref('1')
const activeIndex = ref(0)
@@ -111,6 +213,27 @@ const testStatus = toRef(props, 'testStatus');
const ts = ref('');
watch(activeIndex, function (newValue, oldValue) {
if(activeIndex.value === 1)
{
step1InitLog.value.length = 0;
step1InitLog.value = step1Log.value;
}
if(activeIndex.value === 2)
{
step2InitLog.value.length = 0;
step2InitLog.value = step2Log.value;
}
if(activeIndex.value === 3)
{
step3InitLog.value.length = 0;
step3InitLog.value = step3Log.value;
}
if(activeIndex.value > 3)
{
step4InitLog.value.length = 0;
step4InitLog.value = step4Log.value;
}
if(activeIndex.value < activeTotalNum.value - 2)
collapseActiveName.value = (newValue+1).toString()
else
@@ -138,7 +261,7 @@ watch(testStatus, function (newValue, oldValue) {
ts.value = 'success'
}
}, 1000);
}, 1500);
}
})
@@ -166,6 +289,20 @@ watch(ts, function (newValue, oldValue) {
width: 15%;
margin-left: 20px;
}
.dialog-left :deep(.test-head-steps){
height: 80px;
margin-bottom: 10px;
}
.dialog-left :deep(.el-step__title) {
font-size: 18px !important; /* 设置标题字体大小 */
}
/* .dialog-left :deep(.el-step__icon-inner) {
font-size: 16px !important;
} */
.dialog-right{
margin-left: 20px;
width: 80%;
@@ -173,5 +310,6 @@ watch(ts, function (newValue, oldValue) {
}
.div-log{
height: 100px;
padding-left: 10px;
}
</style>

34
frontend/src/views/home/components/reportPopup.vue
View File

@@ -2,18 +2,34 @@
<el-dialog title="报告生成" :model-value='visible' @close="handleCancel" v-bind="dialogBig">
<div class="report-dialog">
<div class="report-title">
<div>
<el-row :gutter="16" >
<el-col :span="8">
<el-form-item label="检测脚本:" >
<el-input v-model='testScriptName' :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="误差体系" >
<el-input v-model='errorSysName' :disabled="true"/>
</el-form-item>
</el-col>
</el-row>
</div>
<div>
<el-row :gutter="16" >
<el-col :span="8">
<el-form-item label="数据处理原则" >
<el-input v-model='dataRule' :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="报告模板" >
<el-input v-model='reportTemplate' :disabled="true"/>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<div class="report-content">
<div>
@@ -21,17 +37,17 @@
<el-tab-pane label="报告生成状态表：">
<div class="form-grid">
<div class="tabs-title"><el-button type="primary" loading >已生成2台/共4台</el-button> </div>
<el-table :data="reportData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border class="custom-table">
<el-table-column prop="id" label="序号" />
<el-table-column prop="deviceName" label="设备名称" />
<el-table-column label="生成进度">
<el-table :data="reportData" stripe="" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border class="custom-table">
<el-table-column prop="id" width="70" label="序号" />
<el-table-column prop="deviceName" width="150" label="设备名称" />
<el-table-column label="生成进度" width="450">
<template #default="scope">
<el-progress :color="customColors" :percentage="scope.row.processValue" />
</template>
</el-table-column>
<el-table-column prop="action" label="操作" >
<el-table-column prop="action" label="操作" width="100">
<template #default="scope">
<el-button type='primary' link :icon='View'> 查看</el-button>
<el-button type='primary' link :icon='View' :disabled="scope.row.processValue < 100">查看</el-button>
</template>
</el-table-column>
</el-table>
@@ -116,9 +132,9 @@ const props = defineProps<{
}
.report-title{
display: flex;
flex-direction: row;
margin-top: 10px;
/* display: flex; */
/* flex-direction: row;
margin-top: 10px; */
}
.report-content{

57
frontend/src/views/home/components/table.vue
View File

@@ -1,15 +1,16 @@
<template>
<div class="table_info">
<!-- :request-api="getTableList" -->
<ProTable
ref="proTable"
:columns="columns"
:data='deviceData'
:request-api="getTableList"
:init-param="initParam"
:data-callback="dataCallback"
@drag-sort="sortTable"
:height="tableHeight"
:stripe="true"
:key="tableKey"
>
<!-- 表格 header 按钮 -->
<template #tableHeader="scope">
@@ -198,10 +199,10 @@ import testPopup from "./testPopup.vue";
import reportPopup from "./reportPopup.vue";
import dataCheckPopup from "./dataCheckPopup.vue";
import dataCheckChangeErrSysPopup from "./dataCheckChangeErrSysPopup.vue";
import { log } from "console";
import { isVisible } from "element-plus/es/utils";
import { reactive, ref } from "vue";
const tableKey = ref(0);
const router = useRouter();
const value1 = ref("");
const value2 = ref("");
@@ -224,6 +225,7 @@ const dialogForm = ref<any>({
tableHeight.value = window.innerHeight - 630;
const deviceData = deviceDataList.plan_devicedata
const operationShow = ref(false);
const operationMinWidth = ref(200);
//下拉框数据
//检测状态数据
let checkStatusList = reactive([
@@ -425,7 +427,6 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 200 ,isShow: operationShow},
])
// 表格配置项
// const columns = reactive<ColumnProps<User.ResUserList>[]>([
// { type: "selection", fixed: "left", width: 70 },
// {
@@ -684,6 +685,8 @@ function tableHeaderInit(val: number) {
disableCheckStatus("检测中")
disableCheckStatus("归档")
disablecheckResultList("未出结果")
columns[columns.length - 1].minWidth = 150;
tableKey.value += 1;
operationShow.value = true;
break;
case 4://设备归档
@@ -695,12 +698,22 @@ function tableHeaderInit(val: number) {
disableCheckStatus("归档")
disableCheckReportStatus("未生成报告")
disablecheckResultList("未出结果")
columns[columns.length - 1].minWidth = 100;
tableKey.value ++;
operationShow.value = true;
break;
case 5://设备浏览
case 5://数据查询
columns[columns.length - 1].minWidth = 250;
tableKey.value += 1;
operationShow.value = true;
break;
}
console.log("test",columns);
}
function refreshStatusList(){
checkStatusList.map((item: any, index: any) => {
@@ -745,21 +758,29 @@ function disablecheckResultList(val: string){
const handleTest = (val:string) => {
//自动检测
if (form.value.activeTabs === 0) {
ElMessage.success("手动检测");
dialogTitle.value = '手动检测';
if(val==='手动检测'||val==='自动检测'||val==='不合格项复检'||val==='全部复检' )
{
ElMessage.success(val);
dialogTitle.value = val;
dialogFormVisible.value = true; // 打开对话框
}
// router.push({
// path: "/plan/autoTest",
// });
} else {
ElMessage.warning("手动检测");
router.push({
path: "/plan/preTest",
});
if(val==='批量生成')
{
reportDialogVisible.value = true;
}
if(val==='批量归档')
{
const loading = ElLoading.service({
lock: true,
text: '归档中...',
background: 'rgba(0, 0, 0, 0.7)',
})
setTimeout(() => {
loading.close()
ElMessage.success("批量归档成功");
}, 2000)
}
};

314
frontend/src/views/home/components/test.vue
View File

@@ -3,7 +3,7 @@
<div class = "dialog">
<div class="dialog-title">
<el-progress
style="width: 80%"
style="width: 90%"
:percentage="percentage"
:color="customColors"
/>
@@ -22,20 +22,20 @@
@click="handlePauseTest"
>继续检测</el-button
>
<el-button type="danger" :icon="Close" @click="handleFinishTest"
<!-- <el-button type="danger" :icon="Close" @click="handleFinishTest"
>停止检测</el-button
>
> -->
</div>
<!-- background: '#f5f7fa', color: '#606266' -->
<!-- v-on:cell-click="handleClick" -->
<div class="dialog-content">
<el-table :key="tableKey" :data="tableData" :row-class-name="tableRowClassName" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
<!-- <el-table :key="tableKey" :data="tableData" :row-class-name="tableRowClassName" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border> -->
<!-- <el-table :data="tableData" :row-class-name="tableRowClassName" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " style="width: 100%" border> -->
<el-table-column fixed prop="scriptItemName" label="检测项目" class="table-first-column" />
<div class="dialog-content">
<el-table :data="tableData" row-key="id" height="545px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " style="width: 100%" border>
<el-table-column fixed prop="scriptItemName" label="检测项目" width="210px" />
<el-table-column label="被检通道1" >
<el-table-column label="被检通道1" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType1==='info' ? '暂无数据' : '点击查看详情'" placement="top">
@@ -52,7 +52,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道2">
<el-table-column label="被检通道2" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType2==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -67,7 +67,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道3">
<el-table-column label="被检通道3" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType3==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -82,7 +82,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道4">
<el-table-column label="被检通道4" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType4==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -97,7 +97,7 @@
</template>
</el-table-column>
<el-table-column p label="被检通道5">
<el-table-column p label="被检通道5" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType5==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -112,7 +112,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道6">
<el-table-column label="被检通道6" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType6==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -128,7 +128,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道7">
<el-table-column label="被检通道7" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType7==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -143,7 +143,7 @@
</template>
</el-table-column>
<el-table-column label="被检通道8">
<el-table-column label="被检通道8" align="center">
<template #default="scope">
<el-tooltip :content="scope.row.resultType8==='info' ? '暂无数据' : '点击查看详情'" placement="top">
<el-button
@@ -164,11 +164,13 @@
</el-table>
</div>
<div class="dialog-log">
<div >
<el-collapse model-value="1" accordion>
<el-collapse-item title="检测日志：" name="1">
<div>
暂无数据，等待检测开始
<div ref="scrollContainer" class="dialog-log">
<p v-for="(item, index) in testLogList" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
{{ item.log }} <br />
</p>
</div>
</el-collapse-item>
</el-collapse>
@@ -188,8 +190,11 @@
import { VideoPause,Refresh,Close } from '@element-plus/icons-vue'
import resultPopup from './resultPopup.vue'
import dataCheckSingleChannelSingleTestPopup from './dataCheckSingleChannelSingleTestPopup.vue'
import { log } from 'console';
import temptest from './temptest.vue'
const activeIndex = ref(0)
const activeTotalNum = ref(12)
const currentRow = ref<{ id: number; scriptItemName: string; name: string; address: string; hasChildren?: boolean; children?: User[] } | null>(null);
// const currentRow = ref(null); // 用于存储当前选中的行
@@ -245,9 +250,76 @@ const tableData1= [
address: 'No. 189, Grove St, Los Angeles',
},
]
const scrollContainer = ref<HTMLElement | null>(null); // 声明 scrollContainer
const scrollToBottom = () => {
if (scrollContainer.value) {
console.log(scrollContainer.value)
scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
console.log(scrollContainer.value)
}
};
function getRandomInt(max: number): number {
return Math.floor(Math.random() * max);
}
const updateLog = () => {
const currentTime = ref(new Date().toLocaleString());
switch(activeIndex.value)
{
case 1:
testLogList.value.length = 0; // 清空数组
testLogList.value.push({
type: 'info',
log: currentTime.value + '：频率准确度检测开始',
})
break;
case 2:
testLogList.value.push({
type: 'info',
log:currentTime.value + '：频率准确度检测完成',
})
testLogList.value.push({
type: 'info',
log:currentTime.value + '：电压准确度检测开始',
})
break;
case 3:
testLogList.value.push({
type: 'error',
log:currentTime.value + '：电压准确度检测不合格',
})
testLogList.value.push({
type: 'info',
log:currentTime.value + '：谐波电压准确度检测开始',
})
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 10:
case 11:
case 12:
updateTableData(activeIndex.value.toString())
break;
}
scrollToBottom();
}
const testLogList = ref([
{
type: 'info',
log:'暂无数据，等待检测开始',
},
])
const tableKey = ref(0);
const currentIdx = ref(0);
const tableRowClassName = ({
row,
@@ -256,9 +328,9 @@ const tableRowClassName = ({
row: any
rowIndex: number
}) => {
// console.log(currentIdx.value,rowIndex,row)
// console.log(activeIndex.value,rowIndex,row)
if (row.id === currentIdx.value.toString()) {
if (row.id === activeIndex.value.toString()) {
return 'warning-row'
}
// else if (rowIndex === 3) {
@@ -277,46 +349,52 @@ const dataCheckSingleChannelSingleTestDialogVisable = ref(false);
function clear() {
}
const updateTableData = (id: string, field: string, value: any) => {
const item = tableData.value.find(item => item.id === id);
if (item) {
item[field] = value;
function traverseTableData(data: any[],id: string): void {
data.forEach(item => {
// 处理当前节点的数据
if(item.id === id)
{
for(let i = 1;i<=8;i++)
{
let field1 = "resultType"+i
let field2 = "resultValue"+i
if(getRandomInt(10)>8 && activeIndex.value>2)
{
item[field1] = "danger";
item[field2] = "×";
}
else
{
item[field1] = "success";
item[field2] = "√";
}
}
return;
}
// 如果当前节点有 children，并且 children 是一个数组，则递归遍历
if (Array.isArray(item.children)) {
traverseTableData(item.children,id);
}
});
}
const updateTableData = (id: string) => {
traverseTableData(tableData.value,id);
console.log(id)
};
let timer: any = ref("");
const handlePauseTest = () => {
timer.value = setInterval(() => {
currentIdx.value++;
updateTableData(currentIdx.value.toString(),"resultType1","success")
updateTableData(currentIdx.value.toString(),"resultValue1","√")
tableKey.value ++;
if (percentage.value < 100) {
percentage.value = Math.trunc(currentIdx.value/12 * 100);
} else {
clearInterval(timer.value)
clear();
ElMessageBox.confirm(
'检测全部结束,你可以停留在此页面查看检测结果，或返回首页进行复检、报告生成和归档等操作',
'检测完成',
{
confirmButtonText: '确定',
type: 'success',
})
}
}, 5000);
return;
if (!isPause.value) {
pauseTimer()
} else {
resumeTimer()
}
isPause.value = !isPause.value;
};
@@ -984,18 +1062,6 @@ const tableData = ref([
resultValue8:'-',
},
])
// const selectRow = (id: number) => {
// console.log(id);
// const row = tableData.find(item => item.id === id);
// console.log(row);
// if (row) {
// currentRow.value = row ;
// }
// };
// selectRow(2)
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
@@ -1007,20 +1073,74 @@ const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process
})
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 - 2)
activeIndex.value++
else if(activeIndex.value === activeTotalNum.value -2)
const startTimer = () => {
//if (timer.value !== null) return; // 如果定时器已经启动，则不再重复启动
timer.value = setInterval(() => {
if(activeIndex.value <= activeTotalNum.value)
{
activeIndex.value++
activeIndex.value++
activeIndex.value++;
updateLog()
switch(activeIndex.value)
{
case 1:
updateTableData("1-1-1")
updateTableData("1-1-2")
updateTableData("1-1-3")
updateTableData("1-1-4")
updateTableData("1-1")
updateTableData("1-2-1")
updateTableData("1-2")
updateTableData("1-3-1")
updateTableData("1-3")
updateTableData("1")
break;
case 2:
updateTableData("2-1-1")
updateTableData("2-1-2")
updateTableData("2-1-3")
updateTableData("2-1-4")
updateTableData("2-1-5")
updateTableData("2-1")
updateTableData("2-2-1")
updateTableData("2-2")
updateTableData("2-3-1")
updateTableData("2-3")
updateTableData("2")
break;
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 10:
case 11:
case 12:
updateTableData(activeIndex.value.toString())
break;
}
if (percentage.value < 100) {
percentage.value = Math.trunc(activeIndex.value/activeTotalNum.value * 100);
} else {
percentage.value = 100;
clearInterval(timer)
ts.value = 'success'
ElMessageBox.alert('检测全部结束,你可以停留在此页面查看检测结果，或返回首页进行复检、报告生成和归档等操作', '检测完成', {
// if you want to disable its autofocus
// autofocus: false,
confirmButtonText: '确定',
})
clear();
}
}
else
{
@@ -1028,7 +1148,29 @@ watch(testStatus, function (newValue, oldValue) {
ts.value = 'success'
}
}, 1000);
}, 2000);
};
const pauseTimer = () => {
if (timer.value !== null) {
clearInterval(timer.value);
timer.value = null;
}
};
const resumeTimer = () => {
if (timer.value === null) {
startTimer();
}
};
//监听goods_sn的变化
watch(testStatus, function (newValue, oldValue) {
ts.value = props.testStatus;
if(ts.value==='start')
{
ts.value = 'process'
startTimer()
}
})
@@ -1040,18 +1182,16 @@ watch(ts, function (newValue, oldValue) {
})
</script>
<style scoped>
<style scoped lang="scss">
.el-table .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}
/* .table-first-column{
min-width: 250px !important;
text-align: left !important;
} */
.dialog{
:deep(.dialog){
height: 900px !important;
display: flex;
flex-direction: column;
}
@@ -1064,4 +1204,12 @@ watch(ts, function (newValue, oldValue) {
margin-bottom:10px;
}
.dialog-log{
max-height: 50px;
overflow-y: auto;
// flex-grow: 1;
// display: flex;
// flex-direction: column-reverse;
}
</style>

321
frontend/src/views/home/components/testPopup.vue
View File

@@ -1,183 +1,29 @@
<template>
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogBig" width="1200px" height="1200px">
<div class="steps-container">
<!-- simple -->
<!-- :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" -->
<el-steps class="test-head-steps" simple :space="200" :active="stepsActiveIndex" process-status="finish" finish-status="success" >
<el-steps class="test-head-steps" simple :active="stepsActiveIndex" process-status="finish" finish-status="success" >
<!-- style="height:100px" -->
<el-step title="预检测" :icon="stepsActiveIndex > 0 ? SuccessFilled : Edit" />
<el-step title="守时检测" :icon="stepsActiveIndex > 1 ? SuccessFilled :UploadFilled"/>
<el-step title="系数校准" :icon="stepsActiveIndex > 2 ? SuccessFilled :Picture" />
<el-step title="正式检测" :icon="stepsActiveIndex > 3 ? SuccessFilled :Picture" />
<el-step title="检测完成" :icon="stepsActiveIndex > 4 ? SuccessFilled :Picture" />
<el-step title="系数校准" :icon="stepsActiveIndex > 2 ? SuccessFilled :Odometer" />
<el-step title="正式检测" :icon="stepsActiveIndex > 3 ? SuccessFilled :Coin" />
<el-step title="检测完成" :icon="stepsActiveIndex > 4 ? SuccessFilled :Key" />
</el-steps>
</div>
<preTest v-if="stepsActiveIndex === 0" v-model:testStatus="preTestStatus"></preTest>
<timeTest v-if="stepsActiveIndex === 1" v-model:testStatus="timeTestStatus"></timeTest>
<channelsTest v-if="stepsActiveIndex === 2" v-model:testStatus="channelsTestStatus"></channelsTest>
<test v-if="stepsActiveIndex === 3" v-model:testStatus="TestStatus"></test>
<!-- <el-tabs type="border-card">
<el-tab-pane label="预检测项目：">
<div class="form-grid">
<el-checkbox
v-for="(item, index) in detectionOptions"
v-model="item.selected"
:key="index"
:label="item.name"
></el-checkbox
>
</div>
</el-tab-pane>
</el-tabs>
<div class = "test-dialog">
<div class="dialog-left">
<el-steps direction="vertical" :active="0">
<el-step title="源通讯校验" />
<el-step title="设备通讯校验" />
<el-step title="协议校验" />
<el-step title="相序校验" />
<el-step title="检测完成" />
</el-steps>
</div>
<div class="dialog-right">
<el-collapse :v-model="1" accordion>
<el-collapse-item title="源通讯校验" name="1">
<div>
暂无数据，等待检测开始
</div>
</el-collapse-item>
<el-collapse-item title="设备通讯校验" name="2">
<div>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</div>
<div>
Visual feedback: reflect current state by updating or rearranging
elements of the page.
</div>
</el-collapse-item>
<el-collapse-item title="协议校验" name="3">
<div>
Simplify the process: keep operating process simple and intuitive;
</div>
<div>
Definite and clear: enunciate your intentions clearly so that the
users can quickly understand and make decisions;
</div>
<div>
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
</div>
</el-collapse-item>
<el-collapse-item title="相序校验" name="4">
<div>
Decision making: giving advices about operations is acceptable, but do
not make decisions for the users;
</div>
<div>
Controlled consequences: users should be granted the freedom to
operate, including canceling, aborting or terminating current
operation.
</div>
</el-collapse-item>
</el-collapse>
</div>
</div> -->
<!-- <div class="dialog-footer">
<el-button :icon='CirclePlus' type="primary" @click="openAddDialog">新增</el-button>
<el-button :icon='Delete' type="danger" plain :disabled='!multipleSelection.length' @click="deleteSelectedRows">批量删除</el-button>
</div>
<div class="table-container">
<el-table :data="tableData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" @selection-change="handleSelectionChange" >
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="序号" width="60" />
<el-table-column prop="type" label="电能质量检测指标类型" width="181">
<template #default="{ row }">
<el-select v-model="row.type" placeholder="选择指标类型">
<el-option v-for="option in typeList" :key="option.value" :label="option.label" :value="option.value"/>
</el-select>
</template>
</el-table-column>
<el-table-column label="起止范围" >
<el-table-column label="起始">
<template #default="{ row }">
<el-row type="flex">
<el-col :span="14">
<el-select v-model="row.startSelect" placeholder="选择起始值" style="width: 70px;">
<el-option v-for="option in errorStartOptions" :key="option.value" :label="option.label" :value="option.value"/>
</el-select>
</el-col>
<el-col :span="10">
<el-input v-model= "row.startRange" style="width: 70px;"
/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="结束">
<template #default="{ row }">
<el-row type="flex" >
<el-col :span="14">
<el-select v-model="row.endSelect" placeholder="选择结束值" style="width: 70px;">
<el-option v-for="option in errorEndOptions" :key="option.value" :label="option.label" :value="option.value"/>
</el-select>
</el-col>
<el-col :span="10">
<el-input v-model= "row.endRange" style="width: 70px;"/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="单位" width="115">
<template #default="{ row }">
<el-select v-model="row.unit" placeholder="选择单位">
<el-option
v-for="option in errorUnitOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="最大误差">
<el-table-column prop="maxErrorValue" label="最大误差值" width="100">
<template #default="{ row }">
<el-input v-model= "row.startRange" style="width: 70px;"/>
</template>
</el-table-column>
<el-table-column label="误差类型">
<template #default="{ row }">
<el-select v-model="row.errorType" placeholder="选择误差类型">
<el-option
v-for="option in errorTypeOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作" width="150">
<template #default="{ row }">
<el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
<el-button type='primary' link :icon='Delete' @click="deleteRow(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div> -->
<test v-if="stepsActiveIndex >= 3" v-model:testStatus="TestStatus"></test>
<template #footer>
<div>
<!-- <el-button @click="handleCancel">取 消</el-button> -->
<el-button type="primary" :icon="DArrowRight" v-if="stepsActiveIndex < 2" :disabled="skipDisabled" @click="nextStep">跳过</el-button>
<el-button type="primary" :icon="VideoPlay" v-if="ActiveStatue === 'waiting'" @click="handleSubmit">开始检测</el-button>
<el-button type="danger" :icon="Close" v-if="ActiveStatue === 'process'" @click="handleSubmit">停止检测</el-button>
<el-button type="primary" :icon="Refresh" v-if="ActiveStatue === 'error'" @click="handleSubmit">重新检测</el-button>
@@ -194,7 +40,7 @@
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
import { dialogBig,dialogMiddle} from '@/utils/elementBind'
//import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument,Edit, Picture, UploadFilled, SuccessFilled,VideoPlay,Right,Refresh,Close} from '@element-plus/icons-vue'
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument,Edit, Picture, UploadFilled, SuccessFilled,VideoPlay,Right,Refresh,Close, Odometer,Coin,Key, DArrowRight} from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import preTest from './preTest.vue'
import timeTest from './timeTest.vue'
@@ -220,6 +66,7 @@
(e: 'submit', data: any): void;
}>();
const skipDisabled = ref(false);
const nextStepText = ref('下一步');
//定义与预检测配置数组
const detectionOptions = ref([
@@ -263,7 +110,7 @@ const detectionOptions = ref([
// },
]);
const stepsTotalNum = ref(4);//步骤总数
const stepsTotalNum = ref(5);//步骤总数
const stepsActiveIndex = ref(0); //当前正在执行的步骤索引
const ActiveStatue = ref('waiting');//当前步骤状态
const preTestStatus = ref('waiting');//预检测执行状态
@@ -292,18 +139,31 @@ const detectionOptions = ref([
ActiveStatue.value = newValue
})
const nextStep = () => {
if(stepsActiveIndex.value < stepsTotalNum.value )
stepsActiveIndex.value++
else if(stepsActiveIndex.value === stepsTotalNum.value)
watch(ActiveStatue,function(newValue,oldValue){
if(newValue === 'success' || newValue === 'error')
skipDisabled.value = false
if(newValue === 'success' && stepsActiveIndex.value === stepsTotalNum.value - 2)
{
stepsActiveIndex.value++
stepsActiveIndex.value++;
stepsActiveIndex.value++;
nextStepText.value = '检测完成'
}
else
})
const nextStep = () => {
if(stepsActiveIndex.value < stepsTotalNum.value )
{
stepsActiveIndex.value++
ActiveStatue.value = 'waiting'
}
else if(stepsActiveIndex.value === stepsTotalNum.value)
{
emit('update:visible', false); // 关闭对话框
clearData()
}
};
@@ -316,11 +176,29 @@ const detectionOptions = ref([
nextStepText.value = "下一步"
}
const handleCancel = () => {
clearData()
// if(stepsActiveIndex.value < stepsTotalNum.value)
// {
// ElMessageBox.confirm(
// '是否退出当前检测流程?',
// '提示',
// {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// }
// )
// .then(() => {
// // clearData()
// // emit('update:visible', false); // 关闭对话框
//
// })
// }
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
skipDisabled.value = true
switch (stepsActiveIndex.value) {
case 0:
preTestStatus.value = 'start'
@@ -375,49 +253,68 @@ const detectionOptions = ref([
</script>
<style scoped>
.test-head-steps{
height: 50px;
margin-bottom: 20px;
}
<style scoped lang="scss">
.el-step__icon.is-text {
border-radius: 50%;
border: 4px solid;
width: 50px;
height: 50px;
border-color: inherit;
}
.el-step__icon.is-icon {
border-radius: 50%;
border: 4px solid;
width: 50px;
height: 50px;
border-color: inherit;
}
.steps-container :deep(.test-head-steps){
height: 80px;
margin-bottom: 10px;
}
.test-head-steps .el-step__line{
height:50px !important;
}
.test-head-steps .el-step__icon-inner{
width: 40px !important;
height:40px !important;
}
.test-head-steps .el-step__icon{
width: 48px !important;
height:48px !important;
font-size: 48px !important; /* 调整图标大小 */
line-height: 80px !important; /* 使图标居中 */
}
.test-head-steps .el-step__title {
.steps-container :deep(.el-step__title) {
font-size: 20px !important; /* 设置标题字体大小 */
margin-top: 10px !important; /* 调整标题与图标的间距 */
}
.test-head-steps .el-step__description {
font-size: 20px !important; /* 设置描述字体大小 */
}
.steps-container :deep(.el-step__icon-inner) {
font-size: 20px !important;
}
// :deep(.test-head-steps){
// height: 100px;
// margin-bottom: 20px;
// }
// .el-step__icon.is-text {
// border-radius: 50%;
// border: 4px solid;
// width: 50px;
// height: 50px;
// border-color: inherit;
// }
// .el-step__icon.is-icon {
// border-radius: 50%;
// border: 4px solid;
// width: 50px;
// height: 50px;
// border-color: inherit;
// }
// .test-head-steps .el-step__line{
// height:50px !important;
// }
// .test-head-steps .el-step__icon-inner{
// width: 40px !important;
// height:40px !important;
// }
// .test-head-steps .el-step__icon{
// width: 48px !important;
// height:48px !important;
// font-size: 48px !important; /* 调整图标大小 */
// line-height: 80px !important; /* 使图标居中 */
// }
// :deep(.el-step__title) {
// font-size: 24px !important; /* 设置标题字体大小 */
// margin-top: 10px !important; /* 调整标题与图标的间距 */
// }
// :deep(.el-step__icon-inner) {
// font-size: 24px !important;
// }
// .test-head-steps .el-step__description {
// font-size: 20px !important; /* 设置描述字体大小 */
// }
</style>

144
frontend/src/views/home/components/timeTest.vue
View File

@@ -19,17 +19,22 @@
</div>
<div class="dialog-right">
<div class="right-title">
<div>设备上送时刻表</div>
<!-- <div>设备上送时刻表</div> -->
<div>
<el-button type="primary" loading>设备已合格2台/共4台</el-button>
<el-button type="primary" loading v-if="activeIndex > 0 && activeIndex < activeTotalNum">设备已合格3台/共4台</el-button>
<el-button type="primary" disabled="true" v-if="activeIndex === activeTotalNum">设备已合格3台/共4台</el-button>
</div>
</div>
<div class="right-content">
<el-table :data="errorData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border class="custom-table">
<el-table :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
<el-table-column prop="deviceName" label="设备名" />
<el-table-column prop="updataTime" label="上送时刻" />
<el-table-column prop="ErrorValue" label="守时误差(ms)" />
<el-table-column prop="Result" label="检测结果" />
<el-table-column prop="Result" label="检测结果">
<template #default="scope">
<el-tag :type="scope.row.Result === '合格' ? 'success' : 'danger'">{{ scope.row.Result }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</div>
@@ -43,38 +48,49 @@ import { SuccessFilled } from '@element-plus/icons-vue'
const activeIndex = ref(0)
const activeTotalNum = ref(5)
const activities = [
interface Activity {
content: string;
hollow?: boolean;
timestamp?: string;
size?: string;
color?: string;
icon?: any;
}
const activities = ref<Activity[]>([
{
content: '开始检测',
timestamp: '2018-04-12 20:46',
size: 'large',
color: '#0bbd87',
icon: SuccessFilled,
},
{
content: 'GPS上送时刻',
timestamp: '2018-04-03 20:46',
hollow: true,
},
{
content: '设备最早上送时刻',
timestamp: '2018-04-03 20:46',
hollow: true,
},
{
content: '设备最晚上送时刻',
timestamp: '2018-04-03 20:46',
hollow: true,
},
{
content: '检测结束',
timestamp: '2018-04-03 20:46',
hollow: true,
},
]
},])
const errorData = ref([
const deviceOperatorData = ref([
{
deviceName: '被检设备1',
updataTime: '—',
ErrorValue:'—',
Result: '—',
},
{
deviceName: '被检设备2',
updataTime: '—',
ErrorValue:'—',
Result: '—',
},
{
deviceName: '被检设备3',
updataTime: '—',
ErrorValue:'—',
Result: '—',
},
{
deviceName: '被检设备4',
updataTime: '—',
ErrorValue:'—',
Result: '—',
},
])
const deviceData = ref([
{
deviceName: '被检设备1',
updataTime: '10:30:08.136',
@@ -100,7 +116,6 @@ const errorData = ref([
Result: '合格',
},
])
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
const props = defineProps({
@@ -111,7 +126,7 @@ const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process
})
const testStatus = toRef(props, 'testStatus');
const ts = ref('');
//监听goods_sn的变化
//监听testStatus的变化
watch(testStatus, function (newValue, oldValue) {
ts.value = props.testStatus;
if(ts.value==='start')
@@ -131,11 +146,63 @@ watch(testStatus, function (newValue, oldValue) {
clearInterval(timer)
ts.value = 'success'
}
}, 1000);
}
})
watch(activeIndex, function (newValue, oldValue) {
if(activeIndex.value === 1)
{
activities.value.length = 0;
activities.value.push({
content: '开始检测',
timestamp: '2018-04-12 20:46',
size: 'large',
color: '#0bbd87',
icon: SuccessFilled,
});
}
if(activeIndex.value === 2)
{
activities.value.push({
content: 'GPS上送时刻',
timestamp: '2018-04-03 20:46',
color: '#0bbd87',
icon: SuccessFilled,
size: 'large',
});
}
if(activeIndex.value === 3)
{
activities.value.push({
content: '设备最早上送时刻',
timestamp: '2018-04-03 20:46',
color: '#0bbd87',
icon: SuccessFilled,
size: 'large',
});
deviceOperatorData.value.length = 0;
deviceOperatorData.value = deviceData.value;
}
if(activeIndex.value > 3)
{
activities.value.push({
content: '设备最晚上送时刻',
timestamp: '2018-04-03 20:46',
color: '#0bbd87',
icon: SuccessFilled,
size: 'large',
});
activities.value.push({
content: '检测结束',
timestamp: '2018-04-03 20:46',
color: '#0bbd87',
icon: SuccessFilled,
size: 'large',
});
}
})
const emit = defineEmits(['update:testStatus']);
//监听sn
watch(ts, function (newValue, oldValue) {
@@ -151,21 +218,24 @@ watch(ts, function (newValue, oldValue) {
flex-direction: row; /* 横向排列 */
margin-top: 20px;
min-height: 300px;
/* .dialog-left{
margin-right: 20px;
} */
}
.dialog-left{
margin-left: 20px;
width: 20%;
}
.dialog-right{
margin-top: 25px;
margin-left: 20px;
width: 500px
width: 80%;
}
.right-title{
display: flex;
flex-direction: row; /* 横向排列 */
justify-content: space-between;
justify-content: flex-end;
margin-bottom: 10px;
}
/* width: 100%;