From 17d6a920c0f0b3a14db536fd1f7f5d3431cc048a Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期三, 15 五月 2024 09:03:37 +0800
Subject: [PATCH] 新增风险评估记录
---
src/api/analyse/record/index.ts | 51 ++
src/views/analyse/record/components/recordDialog.vue | 279 +++++++++++++++
src/views/analyse/record/index.vue | 457 +++++++++++++++++++++++++
package.json | 173 ++++----
src/views/analyse/record/index.ts | 64 +++
public/static/example.xls | 0
src/main.ts | 3
7 files changed, 940 insertions(+), 87 deletions(-)
diff --git a/package.json b/package.json
index 8b2ab23..3bf8fef 100644
--- a/package.json
+++ b/package.json
@@ -1,88 +1,89 @@
{
- "name": "vue-next-admin",
- "version": "2.1.1",
- "description": "vue3 vite next admin template",
- "author": "lyt_20201208",
- "license": "MIT",
- "scripts": {
- "dev": "vite --force",
- "build": "vite build",
- "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
- },
- "dependencies": {
- "@element-plus/icons-vue": "^2.0.6",
- "@kjgl77/datav-vue3": "^1.2.1",
- "@wangeditor/editor": "^5.1.14",
- "axios": "^0.27.2",
- "countup.js": "^2.2.0",
- "cropperjs": "^1.5.12",
- "echarts": "^5.3.3",
- "echarts-gl": "^2.0.9",
- "echarts-wordcloud": "^2.0.0",
- "element-plus": "^2.2.9",
- "js-base64": "^3.7.2",
- "js-cookie": "^3.0.1",
- "json-bigint": "^1.0.0",
- "jsplumb": "^2.15.6",
- "mitt": "^3.0.0",
- "nprogress": "^0.2.0",
- "pinia": "^2.0.14",
- "pinia-plugin-persistedstate": "^2.1.1",
- "print-js": "^1.6.0",
- "qrcodejs2-fixes": "^0.0.2",
- "screenfull": "^6.0.1",
- "sortablejs": "^1.15.0",
- "splitpanes": "^3.1.1",
- "vue": "^3.2.36",
- "vue-clipboard3": "^2.0.0",
- "vue-grid-layout": "^3.0.0-beta1",
- "vue-i18n": "^9.1.10",
- "vue-router": "^4.0.15",
- "wangeditor": "^4.7.15",
- "xlsx": "^0.18.5"
- },
- "devDependencies": {
- "@types/json-bigint": "^1.0.1",
- "@types/node": "^17.0.39",
- "@types/nprogress": "^0.2.0",
- "@types/sortablejs": "^1.13.0",
- "@typescript-eslint/eslint-plugin": "^5.27.0",
- "@typescript-eslint/parser": "^5.27.0",
- "@vitejs/plugin-vue": "^2.3.3",
- "@vue/compiler-sfc": "^3.2.36",
- "dotenv": "^16.0.1",
- "eslint": "^8.17.0",
- "eslint-plugin-vue": "^9.1.0",
- "prettier": "^2.6.2",
- "sass": "^1.52.2",
- "sass-loader": "^13.0.0",
- "typescript": "^4.7.3",
- "vite": "^2.9.9",
- "vue-eslint-parser": "^9.0.2"
- },
- "browserslist": [
- "> 1%",
- "last 2 versions",
- "not dead"
- ],
- "bugs": {
- "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
- },
- "engines": {
- "node": ">=12.0.0",
- "npm": ">= 6.0.0"
- },
- "keywords": [
- "vue",
- "vue3",
- "vuejs/vue-next",
- "element-ui",
- "element-plus",
- "vue-next-admin",
- "next-admin"
- ],
- "repository": {
- "type": "git",
- "url": "https://gitee.com/lyt-top/vue-next-admin.git"
- }
+ "name": "vue-next-admin",
+ "version": "2.1.1",
+ "description": "vue3 vite next admin template",
+ "author": "lyt_20201208",
+ "license": "MIT",
+ "scripts": {
+ "dev": "vite --force",
+ "build": "vite build",
+ "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
+ },
+ "dependencies": {
+ "@element-plus/icons-vue": "^2.0.6",
+ "@kjgl77/datav-vue3": "^1.2.1",
+ "@wangeditor/editor": "^5.1.14",
+ "axios": "^0.27.2",
+ "countup.js": "^2.2.0",
+ "cropperjs": "^1.5.12",
+ "echarts": "^5.3.3",
+ "echarts-gl": "^2.0.9",
+ "echarts-wordcloud": "^2.0.0",
+ "element-plus": "^2.2.9",
+ "js-base64": "^3.7.2",
+ "js-cookie": "^3.0.1",
+ "json-bigint": "^1.0.0",
+ "jsplumb": "^2.15.6",
+ "mitt": "^3.0.0",
+ "nprogress": "^0.2.0",
+ "pinia": "^2.0.14",
+ "pinia-plugin-persistedstate": "^2.1.1",
+ "print-js": "^1.6.0",
+ "qrcodejs2-fixes": "^0.0.2",
+ "screenfull": "^6.0.1",
+ "sortablejs": "^1.15.0",
+ "splitpanes": "^3.1.1",
+ "vue": "^3.2.36",
+ "vue-clipboard3": "^2.0.0",
+ "vue-grid-layout": "^3.0.0-beta1",
+ "vue-i18n": "^9.1.10",
+ "vue-router": "^4.0.15",
+ "vue3-json-excel": "^1.0.10-alpha",
+ "wangeditor": "^4.7.15",
+ "xlsx": "^0.18.5"
+ },
+ "devDependencies": {
+ "@types/json-bigint": "^1.0.1",
+ "@types/node": "^17.0.39",
+ "@types/nprogress": "^0.2.0",
+ "@types/sortablejs": "^1.13.0",
+ "@typescript-eslint/eslint-plugin": "^5.27.0",
+ "@typescript-eslint/parser": "^5.27.0",
+ "@vitejs/plugin-vue": "^2.3.3",
+ "@vue/compiler-sfc": "^3.2.36",
+ "dotenv": "^16.0.1",
+ "eslint": "^8.17.0",
+ "eslint-plugin-vue": "^9.1.0",
+ "prettier": "^2.6.2",
+ "sass": "^1.52.2",
+ "sass-loader": "^13.0.0",
+ "typescript": "^4.7.3",
+ "vite": "^2.9.9",
+ "vue-eslint-parser": "^9.0.2"
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not dead"
+ ],
+ "bugs": {
+ "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
+ },
+ "engines": {
+ "node": ">=12.0.0",
+ "npm": ">= 6.0.0"
+ },
+ "keywords": [
+ "vue",
+ "vue3",
+ "vuejs/vue-next",
+ "element-ui",
+ "element-plus",
+ "vue-next-admin",
+ "next-admin"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://gitee.com/lyt-top/vue-next-admin.git"
+ }
}
diff --git a/public/static/example.xls b/public/static/example.xls
new file mode 100644
index 0000000..4bbf94b
--- /dev/null
+++ b/public/static/example.xls
Binary files differ
diff --git a/src/api/analyse/record/index.ts b/src/api/analyse/record/index.ts
new file mode 100644
index 0000000..1c9e7ed
--- /dev/null
+++ b/src/api/analyse/record/index.ts
@@ -0,0 +1,51 @@
+import request from '/@/utils/request';
+
+export function recordApi() {
+ return {
+ getRecordList: (params: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + '/basic/select/getOldRiskAssessPage',
+ method: 'post',
+ data: params
+ });
+ },
+ modRecord: (params: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + '/basic/update/updateOldRiskAssess',
+ method: 'post',
+ data: params
+ });
+ },
+ addRecord: (params: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + '/basic/insert/insertOldRiskAssess',
+ method: 'post',
+ data: params
+ });
+ },
+ deleteRecordById: (params: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + '/basic/delete/deleteOldRiskAssess',
+ method: 'post',
+ data: params
+ });
+ },
+ addFile: (params: object) => {
+ return request({
+ headers: {
+ 'Content-Type': 'multipart/form-data'
+ },
+ url: import.meta.env.VITE_API_URL + '/basic/insert/importOldRiskAssess',
+ method: 'post',
+ data: params
+ });
+ },
+ exportFile: (params: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + '/basic/select/exportOldRiskAssess',
+ method: 'post',
+ data: params
+ });
+ },
+ };
+}
diff --git a/src/main.ts b/src/main.ts
index 7cfa70a..a3c5f47 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,7 @@
import VueGridLayout from 'vue-grid-layout';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import DataVVue3 from '@kjgl77/datav-vue3'
+import vue3JsonExcel from 'vue3-json-excel'
// import 'lib-flexible/flexible'
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -22,6 +23,6 @@
directive(app);
other.elSvg(app);
-app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t, locale: zhCn }).use(i18n).use(DataVVue3).use(VueGridLayout).mount('#app');
+app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t, locale: zhCn }).use(i18n).use(DataVVue3).use(VueGridLayout).use(vue3JsonExcel).mount('#app');
app.config.globalProperties.mittBus = mitt();
diff --git a/src/views/analyse/record/components/recordDialog.vue b/src/views/analyse/record/components/recordDialog.vue
new file mode 100644
index 0000000..f452dac
--- /dev/null
+++ b/src/views/analyse/record/components/recordDialog.vue
@@ -0,0 +1,279 @@
+<template>
+ <div class="system-menu-dialog-container">
+ <el-dialog :title="recordDialogState.title" v-model="recordDialogState.recordDialogVisible" width="600px">
+ <el-form ref="recordFormRef" :rules="recordDialogState.recordFormRules" :model="recordDialogState.recordForm" size="default" label-width="135px">
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="区域" prop="region">
+ <el-input v-model="recordDialogState.recordForm.region" :disabled="recordDialogState.disabled" ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="潜在事故" prop="potentialAccident">
+ <el-input type="textarea" v-model="recordDialogState.recordForm.potentialAccident" :disabled="recordDialogState.disabled" ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="危险、有害因素" prop="dangerReason">
+ <el-input v-model="recordDialogState.recordForm.dangerReason" :disabled="recordDialogState.disabled" ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="触发条件" prop="triggerFactor">
+ <el-input type="textarea" v-model="recordDialogState.recordForm.triggerFactor" :disabled="recordDialogState.disabled"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect">
+ <el-form-item label="事故后果" prop="accidentResult">
+ <el-input v-model="recordDialogState.recordForm.accidentResult" :disabled="recordDialogState.disabled" ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-row :gutter="22">
+ <el-col :span="11" class="mb20 ml18 ">
+ <el-form-item label="L" prop="l">
+ <el-input v-model="recordDialogState.recordForm.l" :disabled="recordDialogState.disabled"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="11" class="mb20 ">
+ <el-form-item label="E" prop="e">
+ <el-input v-model="recordDialogState.recordForm.e" :disabled="recordDialogState.disabled"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="22">
+ <el-col :span="11" class="mb20 ml18 ">
+ <el-form-item label="C" prop="c">
+ <el-input v-model="recordDialogState.recordForm.c" :disabled="recordDialogState.disabled"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="11" class="mb20 ">
+ <el-form-item label="D" prop="d">
+ <el-input v-model="recordDialogState.recordForm.d" :disabled="recordDialogState.disabled" ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 ">
+ <el-form-item label="危险等级" prop="dangerLevel">
+ <el-select style="width: 100%" :disabled="recordDialogState.disabled" v-model="recordDialogState.recordForm.dangerLevel" clearable>
+ <el-option v-for="item in recordDialogState.dangerTypeList" :key="item.id" :label="item.name" :value="item.name"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 ">
+ <el-form-item label="现有安全控制措施" prop="controlMeasure">
+ <el-input type="textarea" v-model="recordDialogState.recordForm.controlMeasure" :disabled="recordDialogState.disabled" placeholder="现有安全控制措施（工程技术、管理、培训教育、个体防护、应急处置）"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect" >
+ <el-form-item label="管控层级" prop="controlLevel">
+ <el-select style="width: 100%" multiple :disabled="recordDialogState.disabled" v-model="recordDialogState.recordForm.controlLevel" clearable>
+ <el-option v-for="item in recordDialogState.manageLevelList" :key="item.id" :label="item.name" :value="item.name"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="recordDialogState.recordDialogVisible = !recordDialogState.recordDialogVisible" size="default">取 消</el-button>
+ <el-button v-if="!recordDialogState.disabled" type="primary" @click="onSubmitPlan" size="default">确定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance } from "vue";
+import {ElMessage} from "element-plus";
+import {planApi} from "/@/api/analyse/plan";
+import {isValidKey} from "/@/utils/methods";
+import {recordApi} from "/@/api/analyse/record";
+
+const recordFormRef = ref()
+
+const recordDialogState = reactive<RecordDialogType>({
+ title: '',
+ disabled: false,
+ recordDialogVisible: false,
+ recordForm: {
+ id:null,
+ region:'',
+ potentialAccident: '',
+ dangerReason: '',
+ triggerFactor: '',
+ accidentResult: '',
+ l: null,
+ e: null,
+ c: null,
+ d: null,
+ dangerLevel: null,
+ controlMeasure: '',
+ controlLevel: [],
+ },
+ recordFormRules: {
+ region: [{ required: true, message: '请输入区域', trigger: 'change' }],
+ potentialAccident: [{ required: true, message: '请输入潜在事故', trigger: 'blur' }],
+ dangerReason: [{ required: true, message: '请输入危险、有害因素', trigger: 'blur' }],
+ triggerFactor: [{ required: true, message: '请输入触发条件', trigger: 'change' }],
+ accidentResult: [{ required: true, message: '请输入事故后果', trigger: 'change' }],
+ l: [{ required: true, message: '请输入L', trigger: 'change' }],
+ e: [{ required: true, message: '请输入E', trigger: 'change' }],
+ c: [{ required: true, message: '请输入C', trigger: 'change' }],
+ d: [{ required: true, message: '请输入D', trigger: 'change' }],
+ dangerLevel: [{ required: true, message: '请选择评危险等级', trigger: 'change' }],
+ controlMeasure: [{ required: true, message: '请输入现有安全控制措施', trigger: 'change' }],
+ controlLevel: [{ required: true, message: '请选择管理层级', trigger: 'change' }],
+
+ },
+ dangerTypeList: [
+ {id: 1, name: '低风险'},
+ {id: 2, name: '一般风险'},
+ {id: 3, name: '较大风险'},
+ ],
+ manageLevelList: [
+ {id: 1, name: '公司级'},
+ {id: 2, name: '部门级'},
+ {id: 3, name: '岗位级'},
+ ]
+})
+
+const showRecordDialog = (title: string, value: any) => {
+ recordDialogState.recordDialogVisible = true;
+
+ recordDialogState.disabled = false
+ setTimeout(() => {
+ recordFormRef.value.clearValidate();
+ });
+ if(title === '新增'){
+ recordDialogState.title = '新增';
+ recordDialogState.recordForm = {
+ region:'',
+ potentialAccident: '',
+ dangerReason: '',
+ triggerFactor: '',
+ accidentResult: '',
+ l: null,
+ e: null,
+ c: null,
+ d: null,
+ dangerLevel: null,
+ controlMeasure: '',
+ controlLevel: [],
+ };
+ }else if(title === '查看' || title === '编辑') {
+ for (let i in recordDialogState.recordForm) {
+ if (isValidKey(i, recordDialogState.recordForm)) {
+ if (i === 'controlLevel') {
+ let arr = []
+ arr = value[i].split('\n')
+ recordDialogState.recordForm[i] = arr
+ } else {
+ recordDialogState.recordForm[i] = value[i]
+ }
+ }
+ }
+ if (title === '查看') {
+ recordDialogState.title = '查看';
+ recordDialogState.disabled = true
+ } else {
+ recordDialogState.title = '编辑';
+ recordDialogState.recordForm.id = value.id
+ }
+ }
+
+};
+
+const onSubmitPlan = () => {
+ recordFormRef.value.validate(async(valid: boolean) => {
+ if(valid){
+ recordDialogState.recordForm.controlLevel = recordDialogState.recordForm.controlLevel.join('\n')
+ if(recordDialogState.title === '新增'){
+ let res = await recordApi().addRecord(recordDialogState.recordForm);
+ if(res.data.code === 100){
+ emit('getList')
+ recordDialogState.recordDialogVisible = false;
+ ElMessage({
+ type: 'success',
+ message: '新增成功'
+ })
+ }else{
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg,
+ });
+ }
+ }else{
+
+ let res = await recordApi().modRecord(recordDialogState.recordForm)
+ if(res.data.code === 100){
+ emit('getList')
+ recordDialogState.recordDialogVisible = false;
+ ElMessage({
+ type: 'success',
+ message: '编辑成功'
+ })
+ }else{
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg,
+ });
+ }
+ }
+ }else{
+ ElMessage({
+ type: 'warning',
+ message: '请完善基本信息',
+ });
+ }
+ })
+}
+
+const emit = defineEmits(['getList'])
+
+defineExpose({
+ showRecordDialog
+})
+</script>
+
+<style lang="scss" scoped>
+ ::v-deep(.pickTime){
+ position: absolute !important;
+ top: 0 !important;
+ }
+ .valueSelect{
+ ::v-deep(.el-popper){
+ .el-select-dropdown__item{
+ width: 100%;
+ height: auto;
+ white-space: normal;
+ word-break: break-all;
+ word-wrap: break-word;
+ overflow: auto;
+ padding: 10px 25px;
+ border-bottom: 1px solid #ccc;
+
+ .valueTable{
+ &>div{
+ line-height: 1.5;
+ margin-bottom: 6px;
+ display: flex;
+ align-items: center;
+
+ div{
+ color: #999;
+ }
+
+ span{
+ font-weight: bolder;
+ }
+
+ &:last-of-type{
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+</style>
diff --git a/src/views/analyse/record/index.ts b/src/views/analyse/record/index.ts
new file mode 100644
index 0000000..74ed97a
--- /dev/null
+++ b/src/views/analyse/record/index.ts
@@ -0,0 +1,64 @@
+declare interface RecordStateType {
+ recordData: Array<RecordType>
+ searchQuery: {
+ pageIndex: number,
+ pageSize: number,
+ region: string,
+ dangerLevel: string,
+ controlLevel: string
+ }
+ dangerTypeList: Type []
+ manageLevelList: Type []
+ total: number
+ tagBg: Array<string>
+ fileList: Array<object>
+ uploadUrl: string
+ header: object
+ visible: boolean
+ expertData: Array<object>
+}
+
+declare interface RecordType {
+ id: number | null,
+ area: string | null,
+ accident: string | null,
+ danger: string | null,
+ condition: string | null,
+ result: string | null,
+ l: number | null,
+ e: number | null,
+ c: number | null,
+ d: number | null,
+ dangerType: number | null,
+ safetyMeasures: string | null,
+ manageLevel: Array<string>,
+}
+
+declare interface Type {
+ id: number,
+ name: string,
+}
+declare interface RecordDialogType {
+ title: string,
+ disabled: boolean,
+ recordDialogVisible: boolean,
+ recordForm: {
+ id?: number | null,
+ region: string | null,
+ potentialAccident: string | null,
+ dangerReason: string | null,
+ triggerFactor: string | null,
+ accidentResult: string | null,
+ l: number | null,
+ e: number | null,
+ c: number | null,
+ d: number | null,
+ dangerLevel: null,
+ controlMeasure: string,
+ controlLevel: string,
+ },
+ recordFormRules: {},
+ dangerTypeList: Type [],
+ manageLevelList: Type []
+}
+
diff --git a/src/views/analyse/record/index.vue b/src/views/analyse/record/index.vue
new file mode 100644
index 0000000..b76728c
--- /dev/null
+++ b/src/views/analyse/record/index.vue
@@ -0,0 +1,457 @@
+<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>
--
Gitblit v1.9.2