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:
GGJ
2024-12-05 11:07:54 +08:00
parent 7d5d128b54
commit 92df927453
5 changed files with 185 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/styles/element.scss
View File

@@ -489,4 +489,22 @@
font-size: 12px !important; font-size: 12px !important;
// color: var(--ba-bg-color-overlay) !important; // color: var(--ba-bg-color-overlay) !important;
} }
} }
.el-message-box{
padding: 0px !important;
.el-message-box__header{
background-color: var(--el-color-primary);
.el-message-box__title{
color: #fff;
padding: 10px 10px 0;
}
}
.el-message-box__content{
padding: 10px ;
border-bottom: 1px solid #cccccc;
}
.el-message-box__btns {
padding: 10px;}
}

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

@@ -346,7 +346,7 @@ emit('update:testStatus',ts.value)
margin-bottom: 10px; margin-bottom: 10px;
} }
.right-content{ .right-content{
max-height: 400px; /* max-height: 400px; */
} }
.custom-tabs-label .el-icon { .custom-tabs-label .el-icon {
@@ -356,4 +356,10 @@ emit('update:testStatus',ts.value)
vertical-align: middle; vertical-align: middle;
margin-left: 4px; margin-left: 4px;
} }
.dialog-content{
height: 472px;
}
.el-tabs--border-card {
height: 435px;
}
</style> </style>

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

@@ -1,131 +1,130 @@
<template> <template>
<div> <div>
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="预检测项目"> <el-tab-pane label="预检测项目">
<div class="form-grid"> <div class="form-grid">
<el-checkbox <el-checkbox v-for="(item, index) in detectionOptions" v-model="item.selected" :key="index"
v-for="(item, index) in detectionOptions" :label="item.name"></el-checkbox>
v-model="item.selected" <!-- disabled="true" -->
:key="index" </div>
:label="item.name" </el-tab-pane>
</el-tabs>
></el-checkbox
>
<!-- disabled="true" -->
</div>
</el-tab-pane>
</el-tabs>
<div class = "test-dialog"> <div class="test-dialog">
<div class="dialog-left"> <div class="dialog-left">
<el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus" finish-status="success"> <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
<el-step title="源通讯校验" /> finish-status="success">
<el-step title="设备通讯校验" /> <el-step title="源通讯校验" />
<el-step title="协议校验" /> <el-step title="设备通讯校验" />
<el-step title="相序校验" /> <el-step title="协议校验" />
<el-step title="检测完成" /> <el-step title="相序校验" />
</el-steps> <el-step title="检测完成" />
</div> </el-steps>
<div class="dialog-right"> </div>
<div class="dialog-right">
<el-collapse v-model="collapseActiveName" accordion> <el-collapse v-model="collapseActiveName" accordion>
<el-collapse-item title="源通讯校验" name="1"> <el-collapse-item title="源通讯校验" name="1">
<div class = "div-log"> <div class="div-log">
<p v-for="(item, index) in step1InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}"> <p v-for="(item, index) in step1InitLog" :key="index"
{{ item.log }} <br /> :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
</p> {{ item.log }} <br />
</div> </p>
</el-collapse-item> </div>
<el-collapse-item title="设备通讯校验" name="2"> </el-collapse-item>
<div class = "div-log"> <el-collapse-item title="设备通讯校验" name="2">
<p v-for="(item, index) in step2InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}"> <div class="div-log">
{{ item.log }} <br /> <p v-for="(item, index) in step2InitLog" :key="index"
</p> :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
</div> {{ item.log }} <br />
</el-collapse-item> </p>
<el-collapse-item title="协议校验" name="3"> </div>
<div class = "div-log"> </el-collapse-item>
<p v-for="(item, index) in step3InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}"> <el-collapse-item title="协议校验" name="3">
{{ item.log }} <br /> <div class="div-log">
</p> <p v-for="(item, index) in step3InitLog" :key="index"
</div> :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
</el-collapse-item> {{ item.log }} <br />
<el-collapse-item title="相序校验" name="4"> </p>
<div class = "div-log"> </div>
<p v-for="(item, index) in step4InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}"> </el-collapse-item>
{{ item.log }} <br /> <el-collapse-item title="相序校验" name="4">
</p> <div class="div-log">
</div> <p v-for="(item, index) in step4InitLog" :key="index"
</el-collapse-item> :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
{{ item.log }} <br />
</p>
</div>
</el-collapse-item>
</el-collapse> </el-collapse>
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="tsx" setup name="preTest"> <script lang="tsx" setup name="preTest">
const step1InitLog = ref([ const step1InitLog = ref([
{ {
type: 'info', type: 'info',
log:'暂无数据，等待检测开始', log: '暂无数据，等待检测开始',
}, },
]) ])
const step1Log = ref([ const step1Log = ref([
{ {
type: 'info', type: 'info',
log:'源通讯校验成功', log: '源通讯校验成功',
}, },
]) ])
const step2InitLog = ref([ const step2InitLog = ref([
{ {
type: 'info', type: 'info',
log:'暂无数据，等待检测开始', log: '暂无数据，等待检测开始',
}, },
]) ])
const step2Log = ref([ const step2Log = ref([
{ {
type: 'info', type: 'info',
log:'被检设备：240001通讯校验成功', log: '被检设备：240001通讯校验成功',
}, },
{ {
type: 'info', type: 'info',
log:'被检设备：240002通讯校验成功', log: '被检设备：240002通讯校验成功',
}, },
{ {
type: 'info', type: 'info',
log:'被检设备：240003通讯校验成功', log: '被检设备：240003通讯校验成功',
}, },
{ {
type: 'info', type: 'info',
log:'被检设备：240004通讯校验成功', log: '被检设备：240004通讯校验成功',
}, },
]) ])
const step3InitLog = ref([ const step3InitLog = ref([
{ {
type: 'info', type: 'info',
log:'暂无数据，等待检测开始', log: '暂无数据，等待检测开始',
}, },
]) ])
const step3Log = ref([ const step3Log = ref([
{ {
type: 'info', type: 'info',
log:'被检设备：240001协议校验成功', log: '被检设备：240001协议校验成功',
}, },
{ {
type: 'info', type: 'info',
log:'被检设备：240002协议校验成功', log: '被检设备：240002协议校验成功',
}, },
{ {
type: 'info', type: 'info',
log:'被检设备：240003协议校验成功', log: '被检设备：240003协议校验成功',
}, },
{ {
type: 'info', type: 'info',
log:'被检设备：240004协议校验成功', log: '被检设备：240004协议校验成功',
}, },
]) ])
@@ -133,26 +132,26 @@ const step3Log = ref([
const step4InitLog = ref([ const step4InitLog = ref([
{ {
type: 'info', type: 'info',
log:'暂无数据，等待检测开始', log: '暂无数据，等待检测开始',
}, },
]) ])
const step4Log = ref([ const step4Log = ref([
{ {
type: 'info', type: 'info',
log:'被检设备：240001相序校验成功', log: '被检设备：240001相序校验成功',
}, },
{ {
type: 'info', type: 'info',
log:'被检设备：240002相序校验成功', log: '被检设备：240002相序校验成功',
}, },
{ {
type: 'info', type: 'info',
log:'被检设备：240003相序校验成功', log: '被检设备：240003相序校验成功',
}, },
{ {
type: 'info', type: 'info',
log:'被检设备：240004相序校验成功', log: '被检设备：240004相序校验成功',
}, },
]) ])
@@ -181,16 +180,16 @@ const detectionOptions = ref([
name: "相序校验",//判断装置的接线是否正确 name: "相序校验",//判断装置的接线是否正确
selected: true, selected: true,
}, },
// { // {
// id: 4, // id: 4,
// name: "守时校验",//判断装置24小时内的守时误差是否小于1s // name: "守时校验",//判断装置24小时内的守时误差是否小于1s
// selected: true, // selected: true,
// }, // },
// { // {
// id: 5, // id: 5,
// name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数 // name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
// selected: true, // selected: true,
// }, // },
// { // {
// id: 6, // id: 6,
// name: "实时数据比对", // name: "实时数据比对",
@@ -203,8 +202,8 @@ const detectionOptions = ref([
const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish'); const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
const props = defineProps({ const props = defineProps({
testStatus: { testStatus: {
type: String, type: String,
default: 'wait' default: 'wait'
} }
@@ -214,54 +213,47 @@ const ts = ref('');
watch(activeIndex, function (newValue, oldValue) { watch(activeIndex, function (newValue, oldValue) {
if(activeIndex.value === 1) if (activeIndex.value === 1) {
{
step1InitLog.value.length = 0; step1InitLog.value.length = 0;
step1InitLog.value = step1Log.value; step1InitLog.value = step1Log.value;
} }
if(activeIndex.value === 2) if (activeIndex.value === 2) {
{
step2InitLog.value.length = 0; step2InitLog.value.length = 0;
step2InitLog.value = step2Log.value; step2InitLog.value = step2Log.value;
} }
if(activeIndex.value === 3) if (activeIndex.value === 3) {
{
step3InitLog.value.length = 0; step3InitLog.value.length = 0;
step3InitLog.value = step3Log.value; step3InitLog.value = step3Log.value;
} }
if(activeIndex.value > 3) if (activeIndex.value > 3) {
{
step4InitLog.value.length = 0; step4InitLog.value.length = 0;
step4InitLog.value = step4Log.value; step4InitLog.value = step4Log.value;
} }
if(activeIndex.value < activeTotalNum.value - 2) if (activeIndex.value < activeTotalNum.value - 2)
collapseActiveName.value = (newValue+1).toString() collapseActiveName.value = (newValue + 1).toString()
else else
collapseActiveName.value = (activeTotalNum.value - 1).toString() collapseActiveName.value = (activeTotalNum.value - 1).toString()
}) })
//监听goods_sn的变化 //监听goods_sn的变化
watch(testStatus, function (newValue, oldValue) { watch(testStatus, function (newValue, oldValue) {
ts.value = props.testStatus; ts.value = props.testStatus;
if(ts.value==='start') if (ts.value === 'start') {
{
ts.value = 'process' ts.value = 'process'
let timer = setInterval(() => { let timer = setInterval(() => {
if(activeIndex.value < activeTotalNum.value - 2) if (activeIndex.value < activeTotalNum.value - 2)
activeIndex.value++ activeIndex.value++
else if(activeIndex.value === activeTotalNum.value -2) else if (activeIndex.value === activeTotalNum.value - 2) {
{ activeIndex.value++
activeIndex.value++ activeIndex.value++
activeIndex.value++ }
} else {
else clearInterval(timer)
{ ts.value = 'success'
clearInterval(timer) }
ts.value = 'success'
} }, 1500);
}, 1500);
} }
}) })
@@ -269,52 +261,61 @@ const emit = defineEmits(['update:testStatus']);
//监听sn //监听sn
watch(ts, function (newValue, oldValue) { watch(ts, function (newValue, oldValue) {
//修改父组件 //修改父组件
emit('update:testStatus',ts.value) emit('update:testStatus', ts.value)
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.test-dialog {
height: 350px;
display: flex;
.test-dialog{ flex-direction: row;
height: 350px; /* 横向排列 */
display: flex; margin-top: 20px;
/* .dialog-left{
flex-direction: row; /* 横向排列 */
margin-top: 20px;
/* .dialog-left{
margin-right: 20px; margin-right: 20px;
} */ } */
} }
.dialog-left{
width: 15%;
margin-left: 20px;
}
/* .dialog-left :deep(.test-head-steps){ .dialog-left {
width: 15%;
margin-left: 20px;
}
/* .dialog-left :deep(.test-head-steps){
height: 80px; height: 80px;
/* margin-bottom: 10px; /* margin-bottom: 10px;
} }
*/ */
/* .dialog-left :deep(.el-step__title) { /* .dialog-left :deep(.el-step__title) {
font-size: 18px !important; /* 设置标题字体大小 font-size: 18px !important; /* 设置标题字体大小
} */ } */
/* .dialog-left :deep(.el-step__icon-inner) { /* .dialog-left :deep(.el-step__icon-inner) {
font-size: 24px !important; font-size: 24px !important;
} */ } */
.dialog-right{ .dialog-right {
margin-left: 20px; margin-left: 20px;
width: 80%; width: 80%;
height: 100%; height: 100%;
} }
.dialog-right :deep(.el-collapse-item__header) {
font-size: 16px; .dialog-right :deep(.el-collapse-item__header) {
} font-size: 16px;
}
.div-log{
height: 100px; .div-log {
padding-left: 10px; height: 145px;
} overflow-y: auto;
padding-left: 10px;
p {
margin: 5px 0;
font-size: 14px;
}
}
</style> </style>

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

@@ -224,8 +224,9 @@ watch(ts, function (newValue, oldValue) {
display: flex; display: flex;
flex-direction: row; /* 横向排列 */ flex-direction: row; /* 横向排列 */
margin-top: 20px; /* margin-top: 20px; */
min-height: 300px; /* min-height: 300px; */
height: 472px;
/* .dialog-left{ /* .dialog-left{
margin-right: 20px; margin-right: 20px;
} */ } */

14
frontend/src/views/home/tabs/dashboard.vue
View File

@@ -353,9 +353,9 @@ const resizeObserver = new ResizeObserver(entries => {
chartsWidth.value = entry.contentRect.width; chartsWidth.value = entry.contentRect.width;
console.log('Charts Info Width:', chartsWidth.value); console.log('Charts Info Width:', chartsWidth.value);
pieRef1.value.reSize(chartsWidth.value * 0.95,145,true); pieRef1.value.reSize(chartsWidth.value * 0.95,180,true);
pieRef2.value.reSize(chartsWidth.value * 0.95,145,true); pieRef2.value.reSize(chartsWidth.value * 0.95,180,true);
pieRef3.value.reSize(chartsWidth.value * 0.95,145,true); pieRef3.value.reSize(chartsWidth.value * 0.95,180,true);
} }
}); });
@@ -631,4 +631,12 @@ onUnmounted(() => {
} }
} }
} }
:deep(.el-collapse-item__conten){
// background-color:#f6f6f6;
padding-bottom: 0px !important;
}
:deep(.el-collapse-item__content ){
// background-color:#f6f6f6;
padding-bottom: 0px !important;
}
</style> </style>