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/analyse/applyReview/components/reportDialog.vue | 40 +++++++++++-
src/views/experiment/project/index.ts | 3 +
src/views/analyse/assessApply/components/reportDialog.vue | 44 ++++++++++++--
src/views/experiment/developing/index.vue | 43 ++++++++++++--
src/views/experiment/project/index.vue | 40 ++++++++++++-
5 files changed, 149 insertions(+), 21 deletions(-)
diff --git a/src/views/analyse/applyReview/components/reportDialog.vue b/src/views/analyse/applyReview/components/reportDialog.vue
index 66e8843..38ed33b 100644
--- a/src/views/analyse/applyReview/components/reportDialog.vue
+++ b/src/views/analyse/applyReview/components/reportDialog.vue
@@ -142,12 +142,26 @@
</tr>
<tr class="m-color b-font required" style="text-align: center">实验和实验项目综合风险等级评定</tr>
<tr>
- <td class="m-color" style="width: 100%">
+ <td class="m-color" style="width: 100%;height: 65px">
<el-radio-group :disabled="reportDialogState.disabled" v-model="reportDialogState.reportForm.assessLevel">
- <el-radio :label="1">重大风险（一级）</el-radio>
- <el-radio :label="2">较大风险（二级）</el-radio>
- <el-radio :label="3">一般风险（三级）</el-radio>
- <el-radio :label="4">低风险（四级）</el-radio>
+ <div style="display: flex;justify-content: center">
+ <div style="display: flex;flex-direction: column">
+ <el-radio :label="1">重大风险（一级）</el-radio>
+ <el-tag v-if="reportDialogState.reportForm.assessLevel == 1" class="tag-style tag-bg1" />
+ </div>
+ <div style="display: flex;flex-direction: column">
+ <el-radio :label="2">较大风险（二级）</el-radio>
+ <el-tag v-if="reportDialogState.reportForm.assessLevel == 2" class="tag-style tag-bg2" />
+ </div>
+ <div style="display: flex;flex-direction: column">
+ <el-radio :label="3">一般风险（三级）</el-radio>
+ <el-tag v-if="reportDialogState.reportForm.assessLevel == 3" class="tag-style tag-bg3" />
+ </div>
+ <div style="display: flex;flex-direction: column">
+ <el-radio :label="4">低风险（四级）</el-radio>
+ <el-tag v-if="reportDialogState.reportForm.assessLevel == 4" style="width: 43px;margin-left: 20px;" class="tag-bg4" />
+ </div>
+ </div>
</el-radio-group>
</td>
</tr>
@@ -586,6 +600,22 @@
display: flex;
justify-content: center;
}
+.tag-style{
+ width: 58px;
+ margin-left: 20px;
+}
+.tag-bg1 {
+ background: rgba(255,0,0,0.5);
+}
+.tag-bg2 {
+ background: rgba(248,82,8,0.5);
+}
+.tag-bg3 {
+ background: rgba(247,255,0,0.5);
+}
+.tag-bg4 {
+ background: rgba(0,112,192,0.5);
+}
</style>
diff --git a/src/views/analyse/assessApply/components/reportDialog.vue b/src/views/analyse/assessApply/components/reportDialog.vue
index cce33ea..1588b5b 100644
--- a/src/views/analyse/assessApply/components/reportDialog.vue
+++ b/src/views/analyse/assessApply/components/reportDialog.vue
@@ -149,12 +149,26 @@
</tr>
<tr class="m-color b-font required" style="text-align: center">实验和实验项目综合风险等级评定</tr>
<tr>
- <td class="m-color" style="width: 100%">
+ <td class="m-color" style="width: 100%;height: 65px">
<el-radio-group :disabled="reportDialogState.disabled" v-model="reportDialogState.reportForm.assessLevel">
- <el-radio :label="1">重大风险（一级）</el-radio>
- <el-radio :label="2">较大风险（二级）</el-radio>
- <el-radio :label="3">一般风险（三级）</el-radio>
- <el-radio :label="4">低风险（四级）</el-radio>
+ <div style="display: flex;justify-content: center">
+ <div style="display: flex;flex-direction: column">
+ <el-radio :label="1">重大风险（一级）</el-radio>
+ <el-tag v-if="reportDialogState.reportForm.assessLevel == 1" class="tag-style tag-bg1" />
+ </div>
+ <div style="display: flex;flex-direction: column">
+ <el-radio :label="2">较大风险（二级）</el-radio>
+ <el-tag v-if="reportDialogState.reportForm.assessLevel == 2" class="tag-style tag-bg2" />
+ </div>
+ <div style="display: flex;flex-direction: column">
+ <el-radio :label="3">一般风险（三级）</el-radio>
+ <el-tag v-if="reportDialogState.reportForm.assessLevel == 3" class="tag-style tag-bg3" />
+ </div>
+ <div style="display: flex;flex-direction: column">
+ <el-radio :label="4">低风险（四级）</el-radio>
+ <el-tag v-if="reportDialogState.reportForm.assessLevel == 4" style="width: 43px;margin-left: 20px;" class="tag-bg4" />
+ </div>
+ </div>
</el-radio-group>
</td>
</tr>
@@ -575,7 +589,22 @@
.m-color {
color: #0c4995;
}
-
+.tag-style{
+ width: 58px;
+ margin-left: 20px;
+}
+.tag-bg1 {
+ background: rgba(255,0,0,0.5);
+}
+.tag-bg2 {
+ background: rgba(248,82,8,0.5);
+}
+.tag-bg3 {
+ background: rgba(247,255,0,0.5);
+}
+.tag-bg4 {
+ background: rgba(0,112,192,0.5);
+}
.roomSelect{
::v-deep(.el-popper){
.el-select-dropdown__item{
@@ -621,6 +650,9 @@
display: flex;
justify-content: center;
}
+:deep(.el-tag){
+ border: none;
+}
</style>
diff --git a/src/views/experiment/developing/index.vue b/src/views/experiment/developing/index.vue
index 1b78e08..9500ff9 100644
--- a/src/views/experiment/developing/index.vue
+++ b/src/views/experiment/developing/index.vue
@@ -13,6 +13,12 @@
<el-option v-for="item in developState.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="developState.searchQuery.searchParams.assessLevel" clearable filterable class="input-box" placeholder="风险等级">
+ <el-option v-for="item in developState.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="getdevelopData">查询</el-button>
<el-button plain @click="reset">重置</el-button>
@@ -74,11 +80,11 @@
</template>
</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>
- </template>
+ <template #default="scope">
+ <el-tag type="info" :class="developState.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>
<!-- <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>-->
<!-- <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>-->
@@ -128,6 +134,7 @@
searchParams: {
experimentName: '',
experimentType: null,
+ assessLevel: null
}
},
total: 0,
@@ -139,7 +146,14 @@
{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 getdevelopData = async () => {
@@ -259,8 +273,10 @@
searchParams: {
experimentName: '',
experimentType: null,
+ assessLevel: null
}
}
+ getdevelopData()
};
const getRoomData = async () => {
@@ -408,6 +424,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%;
@@ -426,4 +454,7 @@
background-color: var(--el-card-bg-color);
box-shadow: none;
}
+:deep(.el-tag){
+ border: none;
+}
</style>
diff --git a/src/views/experiment/project/index.ts b/src/views/experiment/project/index.ts
index 5235c46..ea7412d 100644
--- a/src/views/experiment/project/index.ts
+++ b/src/views/experiment/project/index.ts
@@ -7,11 +7,14 @@
searchParams: {
experimentName: string,
experimentType: null | number,
+ assessLevel: null | number,
}
},
total: 0,
experimentTypeList: Type []
+ riskLevelList: Type []
allRoomList: RoomType []
+ tagBg: Array<string>
}
declare interface ProjectType {
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