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-18 22:04:59 +08:00
parent 5cdbee88b4
commit 977a998767
15 changed files with 1469 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

420
frontend/src/views/home/components/testPopup.vue Normal file
View File

@@ -0,0 +1,420 @@
<template>
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogBig" width="900px">
<!-- simple -->
<!-- :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" -->
<el-steps class="test-head-steps" :space="200" :active="stepsActiveIndex" process-status="finish" finish-status="success" simple>
<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-steps>
<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> -->
<template #footer>
<div>
<!-- <el-button @click="handleCancel">取 消</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>
<el-button type="primary" :icon="Right" v-if="ActiveStatue === 'success'" @click="nextStep">{{nextStepText}}</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup name="testPopup">
import{ElMessage, ElSelectV2, FormInstance,FormItemRule}from'element-plus'
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 { useDictStore } from '@/stores/modules/dict'
import preTest from './preTest.vue'
import timeTest from './timeTest.vue'
import channelsTest from './channelsTest.vue'
const props = defineProps<{
visible: boolean;
dialogTitle: string;
formData: {
id: string;//误差体系表Id
name: string;//误差体系名称
standard_Name:string;//参照标准名称
standard_Time:string;//标准推行时间
dev_Level:string;//使用设备等级
enable:number;//状态：0-不启用 1-启用
state:number;//0-删除 1-正常
};
}>();
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const nextStepText = ref('下一步');
//定义与预检测配置数组
const detectionOptions = ref([
{
id: 0,
name: "源通讯检测",//判断源通讯是否正常
selected: true,
},
{
id: 1,
name: "设备通讯检测",//判断设备的IP、Port、识别码、秘钥是否正常
selected: true,
},
{
id: 2,
name: "协议校验",//ICD报告触发测试
selected: true,
},
{
id: 3,
name: "相序校验",//判断装置的接线是否正确
selected: true,
},
// {
// id: 4,
// name: "守时校验",//判断装置24小时内的守时误差是否小于1s
// selected: true,
// },
// {
// id: 5,
// name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
// selected: true,
// },
// {
// id: 6,
// name: "实时数据比对",
// },
// {
// id: 7,
// name: "录波数据比对",
// },
]);
const stepsTotalNum = ref(4);//步骤总数
const stepsActiveIndex = ref(0); //当前正在执行的步骤索引
const ActiveStatue = ref('waiting');//当前步骤状态
const preTestStatus = ref('waiting');//预检测执行状态
const timeTestStatus = ref('waiting');//守时校验执行状态
const channelsTestStatus = ref('waiting');//通道系数校准执行状态
const TestStatus = ref('waiting');//正式检测执行状态
watch(preTestStatus,function(newValue,oldValue){
console.log(newValue,oldValue);
ActiveStatue.value = newValue
})
watch(timeTestStatus,function(newValue,oldValue){
console.log(newValue,oldValue);
ActiveStatue.value = newValue
})
watch(channelsTestStatus,function(newValue,oldValue){
console.log(newValue,oldValue);
ActiveStatue.value = newValue
})
watch(TestStatus,function(newValue,oldValue){
console.log(newValue,oldValue);
ActiveStatue.value = newValue
})
const nextStep = () => {
if(stepsActiveIndex.value < stepsTotalNum.value )
stepsActiveIndex.value++
else if(stepsActiveIndex.value === stepsTotalNum.value)
{
stepsActiveIndex.value++
nextStepText.value = '检测完成'
}
else
{
emit('update:visible', false); // 关闭对话框
clearData()
}
};
function clearData(){
stepsActiveIndex.value = 0;
preTestStatus.value = "waiting"
timeTestStatus.value = "waiting"
channelsTestStatus.value = "waiting"
TestStatus.value = "waiting"
nextStepText.value = "下一步"
}
const handleCancel = () => {
clearData()
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
switch (stepsActiveIndex.value) {
case 0:
preTestStatus.value = 'start'
break;
case 1:
timeTestStatus.value = 'start'
break;
case 2:
channelsTestStatus.value = 'start'
break;
case 3:
TestStatus.value = 'start'
break;
default:
break;
}
};
// 当 props.visible 改变时，更新 formData
watch(() => props.visible, (newVal) => {
if (!newVal) {
// 这里可以重置表单数据，如果需要的话
}
});
//选中
// 处理选择变化
const handleSelectionChange = (selection: any[]) => {
multipleSelection.value = selection.map(row => row.id); // 更新选中的行
};
const openAddDialog = () => {
tableData.value.push({
id: tableData.value.length + 1,
type: '',
startSelect: '',
startRange: '',
endSelect: '',
endRange: '',
unit:'',
maxErrorValue:'',
errorType:''
});
};
</script>
<style scoped>
.test-head-steps{
margin-bottom: 20px;
}
.test-dialog{
display: flex;
flex: 30% 65%; /* 控件宽度 */
flex-direction: row; /* 横向排列 */
/* .dialog-left{
margin-right: 20px;
} */
}
.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; /* 根据需要调整高度 */
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 隐藏水平滚动条 */
}
</style>