样式调整

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

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>