From 4f97657270b7aef0d3b7a6b25ea2b4adb07a77c7 Mon Sep 17 00:00:00 2001 From: zhouwenxuan <1175765986@qq.com> Date: 星期五, 10 十一月 2023 16:55:34 +0800 Subject: [PATCH] 新增风险等级筛选条件、等级颜色 --- src/views/experiment/project/index.vue | 40 ++++++++++++++++++++++++++++++++++++---- 1 files changed, 36 insertions(+), 4 deletions(-) diff --git a/src/views/experiment/project/index.vue b/src/views/experiment/project/index.vue index d24c76c..67edf14 100644 --- a/src/views/experiment/project/index.vue +++ b/src/views/experiment/project/index.vue @@ -13,6 +13,12 @@ <el-option v-for="item in projectState.experimentTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </div> + <div class="basic-line"> + <span>风险等级:</span> + <el-select v-model="projectState.searchQuery.searchParams.assessLevel" clearable filterable class="input-box" placeholder="风险等级"> + <el-option v-for="item in projectState.riskLevelList" :key="item.id" :label="item.name" :value="item.id"></el-option> + </el-select> + </div> <div style="padding-bottom: 10px"> <el-button type="primary" @click="getProjectData">查询</el-button> <el-button plain @click="reset">重置</el-button> @@ -75,8 +81,8 @@ </el-table-column> <el-table-column prop="assessLevel" label="风险等级"> <template #default="scope"> - <el-tag :type="scope.row.assessLevel == 4?'danger':scope.row.assessLevel == 3 || scope.row.assessLevel == 2?'warning':''"> - {{scope.row.assessLevel == 1?'重大风险':scope.row.assessLevel == 2?'较大风险':scope.row.assessLevel == 3?'一般风险':scope.row.assessLevel == 4?'低风险':'--'}} + <el-tag type="info" :class="projectState.tagBg[scope.row.assessLevel - 1]" style="color:#383838;"> + {{scope.row.assessLevel == 1 ?'重大风险':scope.row.assessLevel == 2?'较大风险':scope.row.assessLevel == 3?'一般风险':scope.row.assessLevel == 4?'低风险':'--'}} </el-tag> </template> </el-table-column> @@ -128,6 +134,7 @@ searchParams: { experimentName: '', experimentType: null, + assessLevel: null } }, total: 0, @@ -139,10 +146,19 @@ {id: 5, name: '特种设备类'}, {id: 6, name: '其它类'}, ], - allRoomList: [] + allRoomList: [], + riskLevelList: [ + {id: 1, name: '重大风险'}, + {id: 2, name: '较大风险'}, + {id: 3, name: '一般风险'}, + {id: 4, name: '低风险'}, + ], + tagBg: ['red', 'orange', 'yellow', 'blue'] + }) const getProjectData = async () => { +console.log(projectState.searchQuery,'11') let res = await projectApi().getProjectByList(projectState.searchQuery); if(res.data.code === 100){ projectState.projectData = res.data.data; @@ -236,8 +252,10 @@ searchParams: { experimentName: '', experimentType: null, + assessLevel: null } } + getProjectData() }; const getRoomData = async () => { @@ -385,7 +403,18 @@ color: #0098f5; } } - +.red { + background: rgba(255,0,0,0.6); +} +.orange { + background: rgba(248,82,8,0.6); +} +.yellow { + background: rgba(247,255,0,0.6); +} +.blue { + background: rgba(0,112,192,0.6); +} :deep(.el-date-editor) { width: 100%; } @@ -403,4 +432,7 @@ background-color: var(--el-card-bg-color); box-shadow: none; } +:deep(.el-tag){ + border: none; +} </style> -- Gitblit v1.9.2