新增风险等级筛选条件、等级颜色

zhouwenxuan

2023-11-10 4f97657270b7aef0d3b7a6b25ea2b4adb07a77c7

新增风险等级筛选条件、等级颜色

 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">
                            <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>

 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">
                            <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>

 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>
@@ -75,7 +81,7 @@
                        </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':''">
                                <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>
@@ -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>

 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 {

 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,7 +81,7 @@
                        </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':''">
                            <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>
@@ -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>