228 lines
7.3 KiB
Vue
228 lines
7.3 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
<!-- <el-form :model="formData" ref='formRuleRef' :rules='rules'>
|
|||
|
|
<el-row :gutter="120" >
|
|||
|
|
<el-col :span="9">
|
|||
|
|
<el-form-item label="误差体系名称" prop="name">
|
|||
|
|
<el-input v-model='formData.name' placeholder="标准号+年份+设备等级"/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="参照标准名称" prop="standard_Name">
|
|||
|
|
<el-input v-model='formData.standard_Name'/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="7">
|
|||
|
|
<el-form-item label="发布时间" prop="standard_Time">
|
|||
|
|
<el-input v-model="formData.standard_Time" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="120" >
|
|||
|
|
<el-col :span="9">
|
|||
|
|
<el-form-item label="适用设备等级" prop="dev_Level">
|
|||
|
|
<el-select v-model='formData.dev_Level' placeholder="请选择设备等级">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in dictStore.getDictData('errorLevel')"
|
|||
|
|
:key="item.id"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.code"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="状态" prop="enable">
|
|||
|
|
<el-select v-model='formData.enable' placeholder="请选择状态">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in dictStore.getDictData('status')"
|
|||
|
|
:key="item.id"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.code"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-form> -->
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
|
|||
|
|
<div class = "test-dialog">
|
|||
|
|
<div class="dialog-left">
|
|||
|
|
<el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus" finish-status="success">
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
<script lang="tsx" setup name="preTest">
|
|||
|
|
|
|||
|
|
const activeIndex = ref(0)
|
|||
|
|
const activeTotalNum = ref(5)
|
|||
|
|
//定义与预检测配置数组
|
|||
|
|
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 currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
testStatus: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'wait'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
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)
|
|||
|
|
{
|
|||
|
|
activeIndex.value++
|
|||
|
|
activeIndex.value++
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
clearInterval(timer)
|
|||
|
|
ts.value = 'success'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['update:testStatus']);
|
|||
|
|
//监听sn
|
|||
|
|
watch(ts, function (newValue, oldValue) {
|
|||
|
|
//修改父组件
|
|||
|
|
emit('update:testStatus',ts.value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
|
|||
|
|
.test-dialog{
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
flex-direction: row; /* 横向排列 */
|
|||
|
|
margin-top: 20px;
|
|||
|
|
/* .dialog-left{
|
|||
|
|
margin-right: 20px;
|
|||
|
|
} */
|
|||
|
|
}
|
|||
|
|
.dialog-left{
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
.dialog-right{
|
|||
|
|
margin-left: 20px;
|
|||
|
|
width: 500px
|
|||
|
|
}
|
|||
|
|
</style>
|