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

325
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>
<test v-if="stepsActiveIndex >= 3" v-model:testStatus="TestStatus"></test>
<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="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
})
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++;
nextStepText.value = '检测完成'
}
})
const nextStep = () => {
if(stepsActiveIndex.value < stepsTotalNum.value )
stepsActiveIndex.value++
{
stepsActiveIndex.value++
ActiveStatue.value = 'waiting'
}
else if(stepsActiveIndex.value === stepsTotalNum.value)
{
stepsActiveIndex.value++
nextStepText.value = '检测完成'
}
else
{
emit('update:visible', false); // 关闭对话框
clearData()
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>