<template>
|
<div class="home-container">
|
<div style="height: 100%">
|
<el-row class="homeCard">
|
<div class="basic-line">
|
<span>区域：</span>
|
<el-input v-model="recordState.searchQuery.region" clearable filterable class="input-box" placeholder="区域">
|
</el-input>
|
</div>
|
<div class="basic-line">
|
<span>危险等级：</span>
|
<el-select v-model="recordState.searchQuery.dangerLevel" clearable filterable class="input-box" placeholder="危险等级">
|
<el-option v-for="item in recordState.dangerTypeList" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
</el-select>
|
</div>
|
<div class="basic-line">
|
<span>管理层级：</span>
|
<el-select v-model="recordState.searchQuery.controlLevel" filterable class="input-box" placeholder="管理层级">
|
<el-option v-for="item in recordState.manageLevelList" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
</el-select>
|
</div>
|
<div style="padding-bottom: 10px">
|
<el-button type="primary" @click="getAssessData">查询</el-button>
|
<el-button plain @click="reset">重置</el-button>
|
</div>
|
</el-row>
|
<div class="homeCard">
|
<div class="main-card">
|
<div class="cardTop">
|
<el-button type="primary" :icon="Plus" size="default" @click="openRecordDialog('新增', {})">新增</el-button>
|
<div style="display: flex">
|
<el-button type="primary" :icon="Upload" size="default" @click="recordState.visible = true" style="margin-right: 10px">导入</el-button>
|
<vue3-json-excel
|
:json-data="recordState.expertData"
|
:fields="fields"
|
name="风险评价记录.xls"
|
>
|
<el-button type="primary" :icon="Download" size="default">导出</el-button>
|
</vue3-json-excel>
|
</div>
|
</div>
|
<el-table ref="multipleTableRef" :border="true" :data="recordState.recordData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
|
<el-table-column type="index" label="序号" align="center" width="60" />
|
<el-table-column prop="region" label="区域" align="center"/>
|
<el-table-column prop="potentialAccident" label="潜在事故" align="center" width="180"/>
|
<el-table-column prop="dangerReason" label="危险、有害因素" align="center"/>
|
<el-table-column prop="triggerFactor" label="触发条件" align="center" width="180"/>
|
<el-table-column prop="accidentResult" label="事故后果" align="center"/>
|
<el-table-column prop="l" label="L" width="60" align="center"/>
|
<el-table-column prop="e" label="E" width="60" align="center"/>
|
<el-table-column prop="c" label="C" width="60" align="center"/>
|
<el-table-column prop="d" label="D" width="60" align="center"/>
|
<el-table-column label="危险等级" align="center">
|
<template #default="scope">
|
<el-tag :class="recordState.tagBg[scope.row.dangerType - 1]" style="color:#383838;">
|
{{scope.row.dangerLevel}}
|
</el-tag>
|
|
</template>
|
</el-table-column>
|
<el-table-column prop="controlMeasure" label="现有安全控制措施（工程技术、管理、培训教育、个体防护、应急处置）" width="220" align="center"/>
|
<el-table-column prop="controlLevel" label="管控层级（公司级、部门级、岗位即）" width="160" align="center"/>
|
<el-table-column label="操作" width="150" fixed="right">
|
<template #default="scope">
|
<el-button size="small" text type="primary" @click="openRecordDialog('编辑', scope.row)">编辑</el-button>
|
<el-button size="small" text type="primary" @click="openRecordDialog('查看',scope.row)">查看</el-button>
|
<el-button size="small" text type="primary" style="color: red" @click="del(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pageBtn">
|
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="recordState.searchQuery.pageIndex" background v-model:page-size="recordState.searchQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="recordState.total" class="page-position"> </el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
<record-dialog ref="recordDialogRef" @getList="getAssessData"></record-dialog>
|
<el-dialog v-model="recordState.visible" title="导入风险评估记录" @close="close" width="450px">
|
<el-form label-width="135px">
|
<el-form-item label="评估记录表格模板" >
|
<el-button @click="downloadFile" size="default" :icon="Download" type="primary">下载模板</el-button>
|
</el-form-item>
|
<el-form-item label="评估记录表格文件">
|
<el-upload
|
accept=".xlsx,.xls"
|
:before-upload="beforeUpload"
|
v-model:file-list="recordState.fileList"
|
action="#"
|
:auto-upload="false"
|
:on-change="handleChange"
|
>
|
<el-button :icon="Upload" size="default" type="primary">点击上传</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="close" size="default">取 消</el-button>
|
<el-button type="primary" @click="onUpload" size="default">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {onMounted, reactive, ref} from "vue";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import { Plus, Upload, Download} from '@element-plus/icons-vue';
|
import recordDialog from './components/recordDialog.vue'
|
import Cookies from "js-cookie";
|
import {recordApi} from "/@/api/analyse/record";
|
|
const recordDialogRef = ref();
|
const recordState = reactive<RecordStateType>({
|
recordData: [],
|
searchQuery: {
|
pageIndex: 1,
|
pageSize: 10,
|
region: '',
|
dangerLevel: '',
|
controlLevel: ''
|
|
},
|
total: 0,
|
dangerTypeList: [
|
{id: 1, name: '低风险'},
|
{id: 2, name: '一般风险'},
|
{id: 3, name: '较大风险'},
|
],
|
manageLevelList: [
|
{id: 1, name: '公司级'},
|
{id: 2, name: '部门级'},
|
{id: 3, name: '岗位级'},
|
],
|
tagBg: ['blue', 'yellow', 'orange', ],
|
fileList: [],
|
uploadUrl: import.meta.env.VITE_API_URL + '/manage/accessory-file/uploadFile',
|
header: {
|
Authorization: Cookies.get('token')
|
},
|
visible: false,
|
expertData: []
|
})
|
|
const fields = ref({
|
'序号':'id',
|
'区域':'region',
|
'潜在事故':'potentialAccident',
|
'危险、有害因素':'dangerReason',
|
'触发条件':'triggerFactor',
|
'事故后果':'accidentResult',
|
'L':'l',
|
'E':'e',
|
'C':'c',
|
'D':'d',
|
'危险等级':'dangerLevel',
|
'现有安全控制措施（工程技术、管理、培训教育、个体防护、应急处置）':'controlMeasure',
|
'管控层级（公司级、部门级、岗位级）':'controlLevel',
|
});
|
|
|
|
const getAssessData = async () => {
|
let res = await recordApi().getRecordList(recordState.searchQuery);
|
if(res.data.code === 100){
|
recordState.recordData = res.data.data.map(item => {
|
return {
|
...item,
|
dangerType: item.dangerLevel === '低风险' ? 1: item.dangerLevel === '一般风险'? 2: item.dangerLevel === '较大风险' ? 3:""
|
}
|
});
|
recordState.total = res.data.total;
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
await getAllData()
|
};
|
|
const getAllData = async () => {
|
let res = await recordApi().exportFile(recordState.searchQuery);
|
if(res.data.code === 100){
|
recordState.expertData = res.data.data
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
};
|
|
const openRecordDialog = (title: string,value: any) =>{
|
recordDialogRef.value.showRecordDialog(title, value);
|
}
|
|
|
const onHandleSizeChange = (val: number) => {
|
recordState.searchQuery.pageSize = val;
|
getAssessData();
|
};
|
|
const onHandleCurrentChange = (val: number) => {
|
recordState.searchQuery.pageIndex = val;
|
getAssessData();
|
};
|
|
const reset = () => {
|
recordState.searchQuery = {
|
pageIndex: 1,
|
pageSize: 10,
|
region: '',
|
dangerLevel: '',
|
controlLevel: ''
|
}
|
getAssessData();
|
};
|
const fileBinaryList = ref([])
|
|
const handleChange = (file, files) => {
|
// file是当前上传的文件，files是当前所有的文件，
|
fileBinaryList.value = files;
|
};
|
const onUpload = async () => {
|
if(recordState.fileList.length == 0){
|
ElMessage({
|
type: 'warning',
|
message: '请先上传表格'
|
});
|
return
|
}else{
|
const formData = new FormData();
|
fileBinaryList.value.forEach((file) => {
|
formData.append('file', file.raw)
|
})
|
console.log('form',formData)
|
const res = await recordApi().addFile(formData)
|
if(res.data.code == 100){
|
recordState.fileList = []
|
recordState.visible = false
|
await getAssessData()
|
}else{
|
ElMessage({
|
type: 'error',
|
message: res.data.msg
|
});
|
}
|
}
|
}
|
const beforeUpload = (file) => {
|
recordState.fileList = [...recordState.fileList, file]
|
recordState.fileList = recordState.fileList.slice(-1)
|
return false;
|
}
|
const close = () => {
|
recordState.fileList = []
|
recordState.visible = false
|
}
|
const downloadFile = () => {
|
const filePath = '/static/example.xls';
|
const link = document.createElement('a');
|
link.href = filePath;
|
link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
|
link.click();
|
}
|
const del = (val) => {
|
ElMessageBox.confirm(`此操作将删除该记录，是否继续?`, '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(async () => {
|
let res = await recordApi().deleteRecordById({ id: val.id });
|
if (res.data.code === 100) {
|
ElMessage({
|
type: 'success',
|
duration: 2000,
|
message: '删除成功'
|
});
|
await getAssessData();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch((error) => {
|
});
|
}
|
onMounted(() => {
|
getAssessData()
|
})
|
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
.home-container {
|
height: calc(100vh - 144px);
|
box-sizing: border-box;
|
overflow: hidden;
|
.homeCard {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
background: #fff;
|
border-radius: 4px;
|
|
.main-card {
|
width: 100%;
|
height: 100%;
|
.cardTop {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
.mainCardBtn {
|
margin: 0;
|
}
|
}
|
.pageBtn {
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
|
.demo-pagination-block + .demo-pagination-block {
|
margin-top: 10px;
|
}
|
.demo-pagination-block .demonstration {
|
margin-bottom: 16px;
|
}
|
}
|
}
|
&:last-of-type {
|
height: calc(100% - 100px);
|
}
|
}
|
.el-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.grid-content {
|
align-items: center;
|
min-height: 36px;
|
}
|
|
.topInfo {
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
font-weight: bold;
|
|
& > div {
|
white-space: nowrap;
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
.stepItem {
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 30px;
|
margin-left: 30px;
|
padding-bottom: 30px;
|
border-left: 2px solid #ccc;
|
&:first-of-type {
|
margin-top: 30px;
|
}
|
&:last-of-type {
|
margin-bottom: 0;
|
border-left: none;
|
}
|
.stepNum {
|
width: 30px;
|
height: 30px;
|
border-radius: 15px;
|
box-sizing: border-box;
|
color: #333;
|
border: 1px solid #999;
|
line-height: 28px;
|
text-align: center;
|
margin-right: 10px;
|
margin-left: -16px;
|
margin-top: -30px;
|
}
|
.stepCard {
|
width: 100%;
|
margin-top: -30px;
|
|
.box-card {
|
width: 100%;
|
&:deep(.el-card__header) {
|
padding: 10px 15px;
|
}
|
.card-header {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
& > div:first-of-type {
|
margin-right: 80px;
|
font-size: 18px;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
&:hover .card-header {
|
color: #0098f5;
|
}
|
&:hover .stepNum {
|
border: 2px solid #0098f5;
|
color: #0098f5;
|
}
|
}
|
|
:deep(.el-date-editor) {
|
width: 100%;
|
}
|
.el-select {
|
width: 100%;
|
}
|
:deep(.el-textarea.is-disabled .el-textarea__inner) {
|
background-color: var(--el-card-bg-color);
|
color: var(--el-input-text-color, var(--el-text-color-regular));
|
}
|
:deep(.el-input.is-disabled .el-input__inner) {
|
color: var(--el-input-text-color, var(--el-text-color-regular));
|
}
|
//:deep(.el-input.is-disabled .el-input__wrapper) {
|
// background-color: var(--el-card-bg-color);
|
// box-shadow: none;
|
//}
|
.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);
|
}
|
</style>
|
