工程安全分析数据管理接口调试完成

src/api/dataAnalysis/projectSafety.js

@@ -1,36 +1,73 @@
 import request from '@/utils/request'
+import requestFormData from '@/utils/request_formdata'
 
-// 获取工程安全列表
+// 获取工程安全分析一本账列表
-export function getProjectSafetyListAPI(data) {
+export function getProjectSafetyAnalysisListAPI(data) {
     return request({
-        url: '/background/***',
+        url: '/background/sj/safety/list',
         method: 'get',
         params: data,
     })
 }
 
-// 新增工程安全
+// 新增工程安全分析一本账列表
-export function addProjectSafetyAPI(data) {
+export function addProjectSafetyAnalysisAPI(data) {
     return request({
-        url: '/background/***',
+        url: '/background/sj/safety/addData',
         method: 'post',
         data,
     })
 }
 
-// 编辑工程安全
+// 编辑工工程安全分析一本账列表
-export function editProjectSafetyAPI(data) {
+export function editProjectSafetyAnalysisAPI(data) {
     return request({
-        url: '/background/***',
+        url: '/background/sj/safety/updateData',
         method: 'post',
         data,
     })
 }
 
-// 删除工程安全
+// 删除工工程安全分析一本账列表
-export function deleteProjectSafetyAPI(data) {
+export function deleteProjectSafetyAnalysisAPI(data) {
     return request({
-        url: '/background/***',
+        url: '/background/sj/safety/delete',
+        method: 'post',
+        data,
+    })
+}
+
+// 获取视频风险分析列表
+export function getVideoSafetyAnalysisListAPI(data) {
+    return request({
+        url: '/background/sj/safety/getVideoList',
+        method: 'get',
+        params: data,
+    })
+}
+
+// 新增视频风险分析列表
+export function addVideoSafetyAnalysisAPI(data) {
+    return requestFormData({
+        url: '/background/sj/safety/addVideoFile',
+        method: 'post',
+        data,
+    })
+}
+
+// 编辑工视频风险分析列表
+export function editVideoSafetyAnalysisAPI(data) {
+    return requestFormData({
+        url: '/background/sj/safety/updateVideoFile',
+        method: 'post',
+        data,
+    })
+}
+
+// 删除工视频风险分析列表
+export function deleteVideoSafetyAnalysisAPI(data) {
+    return request({
+        url: '/background/sj/safety/deleteVideo',
         method: 'post',
         data,
     })

src/components/UploadImgFormData/index.vue

@@ -0,0 +1,268 @@
+<template>
+    <div>
+        <el-upload
+            action="#"
+            name="files"
+            :limit="limit"
+            :headers="headers"
+            :auto-upload="false"
+            :multiple="multiple"
+            :show-file-list="true"
+            list-type="picture-card"
+            :on-error="handleError"
+            :on-exceed="handleExceed"
+            :file-list="fileListInner"
+            :on-remove="handleRemove"
+            :on-preview="handlePreview"
+            :on-change="handleChange"
+            :before-upload="handleBeforeUpload"
+            :class="isDetail || isUploaded ? 'upload-img' : ''"
+        >
+            <i class="el-icon-plus" />
+            <div class="upload-img-box">
+                <slot name="upload-img-box"></slot>
+            </div>
+        </el-upload>
+
+        <el-dialog
+            width="30%"
+            append-to-body
+            :before-close="
+                () => {
+                    dialogInnerVisible = false
+                }
+            "
+            :visible.sync="dialogInnerVisible"
+        >
+            <img
+                :src="previewUrl"
+                style="display: block; max-width: 100%; margin: 0 auto"
+            />
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+export default {
+    props: {
+        // 文件列表
+        fileList: {
+            type: Array,
+            default: () => [],
+        },
+        // 上传地址
+        uploadFileUrl: {
+            type: String,
+            default: '',
+        },
+        // 文件类型
+        fileType: {
+            type: Array,
+            default: ['png', 'jpg', 'jpeg'],
+        },
+        // 文件大小
+        fileSize: {
+            type: Number,
+            default: 10,
+        },
+        // 限制数量
+        limit: {
+            type: Number,
+            default: 1,
+        },
+        // 是否多选
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否为查看详情
+        isDetail: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否上传的数量已经满足
+        isUploaded: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            // addOrEditForm: {
+            //     fileList: [],
+            // },
+            headers: {
+                Authorization: 'Bearer ' + getToken(),
+            },
+            dialogInnerVisible: false,
+            previewUrl: '',
+            deleteFileList: [],
+        }
+    },
+    methods: {
+        // 删除
+        async handleRemove(file, fileList) {
+            this.$emit('onUploadChange', fileList)
+            // if (file.response && file.response.data.length > 0) {
+            //     this.$emit('deleteFile', {
+            //         filePath: file.response.data[0].filePath,
+            //         isNew: true,
+            //     })
+            // } else {
+            //     if (file.isNew) {
+            //         this.$emit('deleteFile', {
+            //             filePath: file.filePath,
+            //             isNew: true,
+            //         })
+            //     } else {
+            //         this.$emit('deleteFile', {
+            //             filePath: file.filePath,
+            //             isNew: false,
+            //         })
+            //     }
+            // }
+            this.$emit('update:fileList', fileList)
+        },
+
+        // 预览
+        handlePreview(file) {
+            this.dialogInnerVisible = true
+            this.previewUrl = file.url
+        },
+
+        // 上传成功
+        handleSuccess(response, file, fileList) {
+            this.$emit('update:fileList', [])
+            if (response.code === 200) {
+                this.$emit('update:fileList', fileList)
+                this.$emit('uploadSuccess')
+            } else {
+                this.$modal.msgError('上传失败')
+            }
+            this.$modal.closeLoading()
+        },
+
+        // 上传失败
+        handleError() {
+            this.$modal.msgError('上传失败')
+            this.$modal.closeLoading()
+        },
+
+        // 上传前
+        handleBeforeUpload(file) {
+            // 根据file的name的后缀判断是否符合要求
+            console.log(file, 'file')
+            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
+            if (!isFormat) {
+                this.$modal.msgError(
+                    `文件格式不正确, 请上传${this.fileType.join(
+                        '、',
+                    )}格式的文件!`,
+                )
+                return false
+            }
+            // 判断文件大小
+            const isLt = file.size / 1024 / 1024 < this.fileSize
+            if (!isLt) {
+                this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
+                return false
+            }
+
+            console.log(file.name, 'file.name')
+
+            this.$modal.loading('图片正在上传，请稍候...')
+            // 替换文件路径中的#号
+            const newFileName = file.name.replace(/#/g, '@')
+            const newFile = new File([file], newFileName, { type: file.type })
+
+            // 修改原始文件的name属性
+            Object.defineProperty(file, 'name', {
+                value: newFileName,
+            })
+
+            return true
+        },
+
+        // 超出限制
+        handleExceed(files, fileList) {
+            this.$modal.msgError(`上传的图片数量不能超过 ${this.limit} 个`)
+        },
+
+        // 文件发生变化
+        handleChange(file, fileList) {
+            console.log(file, fileList, 'file, fileList')
+
+            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
+            if (!isFormat) {
+                this.$modal.msgError(
+                    `文件格式不正确, 请上传${this.fileType.join(
+                        '、',
+                    )}格式的文件!`,
+                )
+
+                this.$emit(
+                    'update:fileList',
+                    fileList.filter((item) => item.uid !== file.uid),
+                )
+                return false
+            }
+            // 判断文件大小
+            const isLt = file.size / 1024 / 1024 < this.fileSize
+            if (!isLt) {
+                this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
+                this.$emit(
+                    'update:fileList',
+                    fileList.filter((item) => item.uid !== file.uid),
+                )
+                return false
+            }
+
+            // 判断文件名称是否过长
+            if (file.name.length > 40) {
+                this.$modal.msgError('文件名称不能超过40个字符')
+                this.$emit(
+                    'update:fileList',
+                    fileList.filter((item) => item.uid !== file.uid),
+                )
+                return false
+            }
+            this.$emit('update:fileList', fileList)
+            this.$emit('onUploadChange', fileList)
+        },
+    },
+
+    computed: {
+        fileListInner: {
+            get() {
+                return this.fileList
+            },
+            set(newValue) {
+                this.$emit('update:fileList', newValue)
+            },
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-upload--picture-card {
+    position: relative;
+    margin-right: 10px;
+
+    .upload-img-box {
+        position: absolute;
+        bottom: -15%;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+}
+::v-deep .upload-img .el-upload--picture-card {
+    display: none;
+}
+</style>

src/utils/request_formdata.js

@@ -0,0 +1,267 @@
+import axios from 'axios'
+import { MessageBox, Message } from 'element-ui'
+import store from '@/store'
+import { getIscId, getToken, removeToken, tansParams } from '@/utils/auth'
+import router from '@/router' // @表示src目录
+import cache from '@/utils/cache'
+import { encryptCBC, decryptCBC } from '@/utils/aescbc'
+import { SM4Util } from '@/utils/sm4'
+// create an axios instance
+const service = axios.create({
+    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+    // withCredentials: true, // send cookies when cross-domain requests
+    timeout: 20000, // request timeout
+})
+
+// request interceptor
+// service.interceptors.request.use(
+//   config => {
+//     // do something before request is sent
+//     if (!config?.custom && store.getters.token) {
+//       // let each request carry token
+//       // ['X-Token'] is a custom headers key
+//       // please modify it according to the actual situation
+//       config.headers['Authorization'] = getToken()
+//     }
+//     return config
+//   },
+//   error => {
+//     // do something with request error
+//     console.log(error) // for debug
+//     return Promise.reject(error)
+//   }
+// )
+
+// request拦截器
+service.interceptors.request.use(
+    (config) => {
+        let iscUserId = getIscId()
+        console.log('iscUserId===' + iscUserId)
+        // 是否需要加密
+        let aqEnnable = false
+        // 是否需要设置 token
+        const isToken = (config.headers || {}).isToken === false
+        // 是否需要防止数据重复提交
+        const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+        if (getToken() && !isToken) {
+            config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+        }
+
+        //参数加密
+        if (config.method === 'post' && config.data) {
+            if (config.headers['decrypt'] != 'decrypt') {
+                // if (aqEnnable) {
+                //     config.data = encryptCBC(JSON.stringify(config.data))
+                // }
+
+                if (config.data instanceof FormData) {
+                    // 对于FormData，我们创建一个对象来保存数据以便验证
+                    const formDataObj = new FormData()
+                    config.data.forEach((value, key) => {
+                        const isFile = value instanceof File
+                        if (aqEnnable && !isFile) {
+                            formDataObj.append(key, encryptCBC(value))
+                        } else {
+                            formDataObj.append(key, value)
+                        }
+                    })
+                    config.data = formDataObj
+                    // dataStr = JSON.stringify(formDataObj)
+                    // 保持Content-Type为multipart/form-data（由浏览器自动设置）
+                    delete config.headers['Content-Type']
+                } else {
+                    if (aqEnnable) {
+                        config.data = encryptCBC(JSON.stringify(config.data))
+                    }
+                }
+            }
+        }
+        config.headers['Content-Type'] = 'application/json'
+        // get请求映射params参数
+        if (config.method === 'get' && config.params) {
+            let url = ''
+            //加密
+            if (aqEnnable) {
+                let urlStr = tansParams(config.params)
+                urlStr = urlStr.slice(0, -1)
+                console.log(urlStr)
+                url = config.url + '?params=' + encryptCBC(urlStr)
+            }
+            //未加密
+            if (!aqEnnable) {
+                url = config.url + '?' + tansParams(config.params)
+                url = url.slice(0, -1)
+            }
+            config.params = {}
+            config.url = url
+        }
+        if (
+            !isRepeatSubmit &&
+            (config.method === 'post' || config.method === 'get')
+        ) {
+            const requestObj = {
+                url: config.url,
+                data:
+                    typeof config.data === 'object'
+                        ? JSON.stringify(config.data)
+                        : config.data,
+                time: new Date().getTime(),
+            }
+            const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
+            const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
+            if (requestSize >= limitSize) {
+                console.warn(
+                    `[${config.url}]: ` +
+                        '请求数据大小超出允许的5M限制，无法进行防重复提交验证。',
+                )
+                return config
+            }
+            const sessionObj = cache.session.getJSON('sessionObj')
+            if (
+                sessionObj === undefined ||
+                sessionObj === null ||
+                sessionObj === ''
+            ) {
+                cache.session.setJSON('sessionObj', requestObj)
+            } else {
+                const s_url = sessionObj.url // 请求地址
+                const s_data = sessionObj.data // 请求数据
+                const s_time = sessionObj.time // 请求时间
+                const interval = 1000 // 间隔时间(ms)，小于此时间视为重复提交
+                if (
+                    s_data === requestObj.data &&
+                    requestObj.time - s_time < interval &&
+                    s_url === requestObj.url
+                ) {
+                    const message = '数据正在处理，请勿重复提交'
+                    console.warn(`[${s_url}]: ` + message)
+                    return Promise.reject(new Error(message))
+                } else {
+                    cache.session.setJSON('sessionObj', requestObj)
+                }
+            }
+        }
+        return config
+    },
+    (error) => {
+        console.log(error)
+        Promise.reject(error)
+    },
+)
+
+// response interceptor
+service.interceptors.response.use(
+    /**
+     * If you want to get http information such as headers or status
+     * Please return  response => response
+     */
+
+    /**
+     * Determine the request status by custom code
+     * Here is just an example
+     * You can also judge the status by HTTP Status Code
+     */
+    (response) => {
+        let sm4 = new SM4Util()
+        if (
+            typeof response.data.decrypt != 'undefined' &&
+            response.data.decrypt
+        ) {
+            let resultData = sm4.decryptDefault_CBC(response.data.data)
+            resultData = removePadding(resultData)
+
+            // replaceAll(/\/g, '').replaceAll(/\s+/g, ' ').replaceAll("","").replaceAll("","")
+            //   .replaceAll("","")
+            //   .replaceAll("", "").replaceAll("","").replaceAll("","").trim();
+            // console.log(removePadding(resultData))
+            try {
+                response.data = JSON.parse(resultData.trim())
+                // 成功解析后的操作
+            } catch (e) {
+                console.log(resultData.trim())
+                console.error('解析JSON数据出错:', e)
+                // 解析失败后的操作，比如提示用户或进行错误处理
+            }
+        }
+        if (
+            response.request.responseType === 'blob' ||
+            response.request.responseType === 'arraybuffer'
+        ) {
+            return response.data
+        }
+        if (typeof response.data.code == 'undefined') {
+            response.data = response.data.data
+        }
+        const res = response.data
+        console.log(res)
+        if (res.code === 401) {
+            removeToken()
+            MessageBox.confirm('登录已过期', '退出登录', {
+                confirmButtonText: '重新登录',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }).then(() => {
+                let iscId = getIscId()
+                window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/'
+                // router.push({ path: '/login' })
+            })
+            return
+        }
+        if (response.request?.responseType === 'blob') {
+            // 文件流
+            return response.data
+        } else if (res.code !== 200) {
+            Message({
+                message: res.msg || 'Error',
+                type: 'error',
+                duration: 5 * 1000,
+            })
+
+            if (
+                res.code === 50008 ||
+                res.code === 50012 ||
+                res.code === 50014
+            ) {
+                // to re-login
+                MessageBox.confirm(
+                    'You have been logged out, you can cancel to stay on this page, or log in again',
+                    'Confirm logout',
+                    {
+                        confirmButtonText: 'Re-Login',
+                        cancelButtonText: 'Cancel',
+                        type: 'warning',
+                    },
+                ).then(() => {
+                    store.dispatch('user/resetToken').then(() => {
+                        location.reload()
+                    })
+                })
+            }
+            return Promise.reject(new Error(res.message || 'Error'))
+        } else {
+            return res
+        }
+    },
+    (error) => {
+        console.log('err' + error) // for debug
+        Message({
+            message: error.message,
+            type: 'error',
+            duration: 5 * 1000,
+        })
+        return Promise.reject(error)
+    },
+)
+function removePadding(decrypted) {
+    const lastByte = decrypted.charCodeAt(decrypted.length - 1)
+    if (lastByte <= 16) {
+        for (let i = decrypted.length - lastByte; i < decrypted.length; i++) {
+            if (decrypted.charCodeAt(i) !== lastByte) {
+                return decrypted // 如果填充不正确，返回原始字符串
+            }
+        }
+        return decrypted.slice(0, -lastByte)
+    }
+    return decrypted
+}
+export default service

src/views/dataAnalysis/projectQuality/components/addAndEditForm.vue

@@ -223,7 +223,6 @@
 import {
     addProjectQualityAPI,
     editProjectQualityAPI,
-    getProjectQualityDetailsAPI,
 } from '@/api/dataAnalysis/projectQuality'
 export default {
     name: 'AddAndEditForm',
@@ -472,26 +471,9 @@ export default {
                 ).toFixed(2)
             }
         },
-
-        // 获取详情
-        async getDetails() {
-            const res = await getProjectQualityDetailsAPI({
-                id: this.detailsId,
-            })
-            // this.addAndEditForm = res.data
-        },
     },
 
     watch: {
-        detailsId: {
-            handler(newVal) {
-                if (newVal) {
-                    this.getDetails()
-                }
-            },
-            immediate: true,
-        },
-
         editRow: {
             handler(newVal) {
                 if (Object.keys(newVal).length > 0) {

src/views/dataAnalysis/projectSafety/components/addAndEditForm.vue

@@ -1,122 +0,0 @@
-<template>
-    <div>
-        <el-form
-            :model="addAndEditForm"
-            label-width="auto"
-            ref="addAndEditFormRef"
-            :rules="addAndEditFormRules"
-        >
-            <el-row>
-                <el-col :span="12">
-                    <el-form-item label="风险销号" prop="projectName">
-                        <el-input
-                            v-model.trim="addAndEditForm.projectName"
-                            clearable
-                            placeholder="请输入风险销号"
-                        />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item label="作业部位">
-                        <el-input
-                            v-model.trim="addAndEditForm.projectName"
-                            clearable
-                            placeholder="请输入作业部位"
-                        />
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row>
-                <el-col :span="12">
-                    <el-form-item label="风险等级">
-                        <el-input
-                            v-model.trim="addAndEditForm.projectName"
-                            clearable
-                            placeholder="请输入风险等级"
-                        />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item label="预控措施">
-                        <el-input
-                            v-model.trim="addAndEditForm.projectName"
-                            clearable
-                            placeholder="请输入预控措施"
-                        />
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row>
-                <el-col :span="12">
-                    <el-form-item label="风险控制关键因素">
-                        <el-input
-                            v-model.trim="addAndEditForm.projectName"
-                            clearable
-                            placeholder="请输入风险控制关键因素"
-                        />
-                    </el-form-item>
-                </el-col>
-
-                <el-col :span="12">
-                    <el-form-item label="开始日期">
-                        <el-input
-                            v-model.trim="addAndEditForm.projectName"
-                            clearable
-                            placeholder="请输入开始日期"
-                        />
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row>
-                <el-col :span="12">
-                    <el-form-item label="是否销号">
-                        <el-input
-                            v-model.trim="addAndEditForm.projectName"
-                            clearable
-                            placeholder="请输入是否销号"
-                        />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12"> </el-col>
-            </el-row>
-        </el-form>
-    </div>
-</template>
-
-<script>
-import {
-    addProjectSafetyAPI,
-    editProjectSafety,
-} from '@/api/dataAnalysis/projectSafety'
-export default {
-    name: 'AddAndEditForm',
-    data() {
-        return {
-            addAndEditForm: {
-                projectName: '',
-            },
-            addAndEditFormRules: {
-                projectName: [
-                    {
-                        required: true,
-                        message: '请输入工程类型',
-                        trigger: 'blur',
-                    },
-                ],
-            },
-        }
-    },
-
-    methods: {
-        submitForm() {
-            this.$refs.addAndEditFormRef.validate((valid) => {
-                if (valid) {
-                    console.log('submitForm')
-                }
-            })
-        },
-    },
-}
-</script>
-
-<style></style>

src/views/dataAnalysis/projectSafety/components/addAndEditFormOne.vue

@@ -0,0 +1,236 @@
+<template>
+    <div>
+        <el-form
+            :model="addAndEditForm"
+            label-width="auto"
+            ref="addAndEditFormRef"
+            :rules="addAndEditFormRules"
+        >
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="风险编号" prop="riskCode">
+                        <el-input
+                            clearable
+                            maxlength="50"
+                            show-word-limit
+                            placeholder="请输入风险编号"
+                            v-model.trim="addAndEditForm.riskCode"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="作业部位" prop="riskSite">
+                        <el-input
+                            clearable
+                            maxlength="50"
+                            show-word-limit
+                            placeholder="请输入作业部位"
+                            v-model.trim="addAndEditForm.riskSite"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="风险等级" prop="riskLevel">
+                        <el-input
+                            clearable
+                            maxlength="50"
+                            show-word-limit
+                            placeholder="请输入风险等级"
+                            v-model.trim="addAndEditForm.riskLevel"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="预控措施" prop="controller">
+                        <el-input
+                            clearable
+                            maxlength="50"
+                            show-word-limit
+                            placeholder="请输入预控措施"
+                            v-model.trim="addAndEditForm.controller"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item
+                        label="风险控制关键因素"
+                        prop="riskController"
+                    >
+                        <el-input
+                            clearable
+                            maxlength="50"
+                            show-word-limit
+                            placeholder="请输入风险控制关键因素"
+                            v-model.trim="addAndEditForm.riskController"
+                        />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="12">
+                    <el-form-item label="开始日期" prop="startTime">
+                        <el-date-picker
+                            type="date"
+                            style="width: 100%"
+                            value-format="yyyy-MM-dd"
+                            placeholder="请选择开始日期"
+                            v-model="addAndEditForm.startTime"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="是否销号" prop="isXh">
+                        <el-radio-group v-model="addAndEditForm.isXh">
+                            <el-radio label="1">是</el-radio>
+                            <el-radio label="0">否</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12"> </el-col>
+            </el-row>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import {
+    addProjectSafetyAnalysisAPI,
+    editProjectSafetyAnalysisAPI,
+} from '@/api/dataAnalysis/projectSafety'
+export default {
+    name: 'AddAndEditFormOne',
+    props: {
+        detailsId: {
+            type: [Number, String],
+            default: '',
+        },
+        editRow: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data() {
+        return {
+            addAndEditForm: {
+                riskCode: '',
+                riskSite: '',
+                riskLevel: '',
+                controller: '',
+                riskController: '',
+                startTime: '',
+                isXh: '',
+            },
+            addAndEditFormRules: {
+                riskCode: [
+                    {
+                        required: true,
+                        message: '请输入风险编号',
+                        trigger: 'blur',
+                    },
+                ],
+                riskSite: [
+                    {
+                        required: true,
+                        message: '请输入作业部位',
+                        trigger: 'blur',
+                    },
+                ],
+                riskLevel: [
+                    {
+                        required: true,
+                        message: '请输入风险等级',
+                        trigger: 'blur',
+                    },
+                ],
+                controller: [
+                    {
+                        required: true,
+                        message: '请输入预控措施',
+                        trigger: 'blur',
+                    },
+                ],
+                riskController: [
+                    {
+                        required: true,
+                        message: '请输入风险控制关键因素',
+                        trigger: 'blur',
+                    },
+                ],
+                startTime: [
+                    {
+                        required: true,
+                        message: '请选择开始日期',
+                        trigger: 'blur',
+                    },
+                ],
+                isXh: [
+                    {
+                        required: true,
+                        message: '请选择是否销号',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        }
+    },
+
+    methods: {
+        submitForm() {
+            return new Promise((resolve, reject) => {
+                this.$refs.addAndEditFormRef.validate(async (valid) => {
+                    if (valid) {
+                        const params = this.addAndEditForm
+                        if (this.detailsId) {
+                            params.id = this.detailsId
+                        }
+                        const API = this.detailsId
+                            ? editProjectSafetyAnalysisAPI
+                            : addProjectSafetyAnalysisAPI
+                        const res = await API(params)
+                        if (res.code === 200) {
+                            resolve(true)
+                        } else {
+                            reject(false)
+                        }
+                    } else {
+                        reject(false)
+                    }
+                })
+            })
+        },
+    },
+
+    watch: {
+        editRow: {
+            handler(newVal) {
+                if (Object.keys(newVal).length > 0) {
+                    const {
+                        riskCode,
+                        riskSite,
+                        riskLevel,
+                        controller,
+                        riskController,
+                        startTime,
+                        isXh,
+                    } = newVal
+                    this.addAndEditForm.riskCode = riskCode
+                    this.addAndEditForm.riskSite = riskSite
+                    this.addAndEditForm.riskLevel = riskLevel
+                    this.addAndEditForm.controller = controller
+                    this.addAndEditForm.riskController = riskController
+                    this.addAndEditForm.startTime = startTime
+                    this.addAndEditForm.isXh = isXh
+                }
+            },
+            immediate: true,
+        },
+    },
+}
+</script>
+
+<style></style>

src/views/dataAnalysis/projectSafety/components/addAndEditFormTwo.vue

@@ -0,0 +1,238 @@
+<template>
+    <div>
+        <el-form
+            :model="addAndEditForm"
+            label-width="120px"
+            ref="addAndEditFormRef"
+            :rules="addAndEditFormRules"
+        >
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="球机名称" prop="ballName">
+                        <el-input
+                            clearable
+                            maxlength="50"
+                            show-word-limit
+                            placeholder="请输入球机名称"
+                            v-model.trim="addAndEditForm.ballName"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="创建时间" prop="createTime">
+                        <el-date-picker
+                            type="date"
+                            style="width: 100%"
+                            value-format="yyyy-MM-dd"
+                            placeholder="请选择创建时间"
+                            v-model="addAndEditForm.createTime"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="名称" prop="name">
+                        <el-input
+                            clearable
+                            maxlength="50"
+                            show-word-limit
+                            placeholder="请输入名称"
+                            v-model.trim="addAndEditForm.name"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="图片" prop="fileList">
+                        <UploadImgFormData
+                            :limit="1"
+                            :file-size="10"
+                            :multiple="true"
+                            ref="faceImgRef"
+                            v-if="!Base64PhotoUrl"
+                            :file-type="['jpg', 'png', 'jpeg']"
+                            :file-list.sync="addAndEditForm.fileList"
+                            :is-uploaded="addAndEditForm.fileList.length >= 1"
+                        />
+
+                        <div class="id-card-face-img" v-else>
+                            <img
+                                :src="
+                                    'data:image/jpeg;base64,' + Base64PhotoUrl
+                                "
+                            />
+                            <i
+                                class="el-icon-delete"
+                                @click="onDeleteFaceImg"
+                            />
+                        </div>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import UploadImgFormData from '@/components/UploadImgFormData/index.vue'
+import {
+    addVideoSafetyAnalysisAPI,
+    editVideoSafetyAnalysisAPI,
+} from '@/api/dataAnalysis/projectSafety'
+export default {
+    name: 'AddAndEditFormOne',
+    components: {
+        UploadImgFormData,
+    },
+    props: {
+        detailsId: {
+            type: [Number, String],
+            default: '',
+        },
+        editRow: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data() {
+        return {
+            Base64PhotoUrl: null,
+            addAndEditForm: {
+                ballName: '',
+                createTime: '',
+                name: '',
+                fileList: [],
+            },
+            addAndEditFormRules: {
+                ballName: [
+                    {
+                        required: true,
+                        message: '请输入球机名称',
+                        trigger: 'blur',
+                    },
+                ],
+                createTime: [
+                    {
+                        required: true,
+                        message: '请选择创建时间',
+                        trigger: 'blur',
+                    },
+                ],
+                name: [
+                    {
+                        required: true,
+                        message: '请输入名称',
+                        trigger: 'blur',
+                    },
+                ],
+                fileList: [
+                    {
+                        required: true,
+                        message: '请上传图片',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        }
+    },
+
+    methods: {
+        submitForm() {
+            return new Promise((resolve, reject) => {
+                this.$refs.addAndEditFormRef.validate(async (valid) => {
+                    if (valid) {
+                        const { ballName, createTime, name, fileList } =
+                            this.addAndEditForm
+
+                        const params = {
+                            ballName,
+                            createTime,
+                            name,
+                        }
+                        if (this.detailsId) {
+                            params.id = this.detailsId
+                        }
+
+                        const formData = new FormData()
+
+                        if (fileList.length > 0) {
+                            fileList.forEach((item) => {
+                                if (!item.id) {
+                                    formData.append('file', item.raw)
+                                }
+                            })
+                        }
+
+                        for (const key in params) {
+                            formData.append(key, params[key])
+                        }
+
+                        const API = this.detailsId
+                            ? editVideoSafetyAnalysisAPI
+                            : addVideoSafetyAnalysisAPI
+                        const res = await API(formData)
+                        if (res.code === 200) {
+                            resolve(true)
+                        } else {
+                            reject(false)
+                        }
+                    } else {
+                        reject(false)
+                    }
+                })
+            })
+        },
+
+        // 删除人脸照片
+        onDeleteFaceImg() {
+            this.Base64PhotoUrl = null
+        },
+    },
+
+    watch: {
+        editRow: {
+            handler(newVal) {
+                if (Object.keys(newVal).length > 0) {
+                    const { ballName, createTime, name, bast64 } = newVal
+                    this.addAndEditForm.ballName = ballName
+                    this.addAndEditForm.createTime = createTime
+                    this.addAndEditForm.name = name
+                    this.addAndEditForm.fileList = [
+                        {
+                            raw: bast64,
+                            name: '图片',
+                            url: bast64,
+                            id: newVal.id,
+                        },
+                    ]
+                    this.Base64PhotoUrl = bast64
+                }
+            },
+            immediate: true,
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.id-card-face-img {
+    width: 148px;
+    height: 148px;
+    border: 1px dashed #dcdfe6;
+    border-radius: 4px;
+    position: relative;
+    & img {
+        width: 100%;
+        height: 100%;
+    }
+
+    .el-icon-delete {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        cursor: pointer;
+        color: #ff4949;
+        font-size: 20px;
+    }
+}
+</style>

src/views/dataAnalysis/projectSafety/index.vue

@@ -7,17 +7,26 @@
         </el-radio-group>
 
         <template v-if="safetyType === '风险一本账'">
-            <el-form label-width="auto" inline :model="queryParams">
+            <el-form label-width="auto" inline :model="queryParams_1">
-                <el-form-item label="工程类型">
+                <el-form-item label="风险编号">
                     <el-input
-                        v-model="queryParams.keyWord"
+                        v-model="queryParams_1.riskCode"
-                        placeholder="请输入项目名称"
+                        clearable
+                        placeholder="请输入风险编号"
                     />
                 </el-form-item>
-                <el-form-item label="工程结构划分">
+                <el-form-item label="作业部位">
-                    <el-select
+                    <el-input
-                        v-model="queryParams.keyWord"
+                        v-model="queryParams_1.riskSite"
-                        placeholder="请选择项目类型"
+                        clearable
+                        placeholder="请输入作业部位"
+                    />
+                </el-form-item>
+                <el-form-item label="风险等级">
+                    <el-input
+                        v-model="queryParams_1.riskLevel"
+                        clearable
+                        placeholder="请输入风险等级"
                     />
                 </el-form-item>
                 <el-form-item>
@@ -28,12 +37,21 @@
                     >
                         查询
                     </el-button>
+
+                    <el-button
+                        size="mini"
+                        type="primary"
+                        @click="onHandleReset"
+                    >
+                        重置
+                    </el-button>
                     <el-button
                         size="mini"
                         type="primary"
                         @click="onHandleAddProject"
-                        >新增</el-button
                     >
+                        新增
+                    </el-button>
                 </el-form-item>
             </el-form>
 
@@ -45,14 +63,33 @@
                     :label="column.label"
                     show-overflow-tooltip
                     v-for="column in tableColumns"
-                />
+                >
+                    <template slot-scope="scope">
+                        <template v-if="column.prop === 'isXh'">
+                            <el-tag
+                                v-if="scope.row.isXh === '1'"
+                                type="warning"
+                                size="mini"
+                            >
+                                是
+                            </el-tag>
+                            <el-tag v-else type="primary" size="mini">
+                                否
+                            </el-tag>
+                        </template>
+
+                        <template v-else>
+                            {{ scope.row[column.prop] }}
+                        </template>
+                    </template>
+                </el-table-column>
                 <el-table-column label="操作" align="center" width="140">
                     <template slot-scope="scope">
                         <el-button
                             type="primary"
                             size="mini"
                             style="padding: 6px 6px"
-                            @click="onHandleEditProject(scope.row)"
+                            @click="onHandleEditProject_1(scope.row)"
                         >
                             编辑
                         </el-button>
@@ -60,43 +97,60 @@
                             type="danger"
                             size="mini"
                             style="padding: 6px 6px"
-                            @click="onHandleDeleteProject(scope.row)"
+                            @click="onHandleDeleteProject_1(scope.row)"
                         >
                             删除
                         </el-button>
                     </template>
                 </el-table-column>
             </el-table>
+
+            <pagination
+                :total="total_1"
+                @pagination="getProjectSafetyAnalysisList"
+                :page.sync="queryParams_1.pageNum"
+                :limit.sync="queryParams_1.pageSize"
+            />
         </template>
 
         <template v-if="safetyType === '视频风险分析'">
-            <el-form label-width="auto" inline :model="queryParams">
+            <el-form label-width="auto" inline :model="queryParams_2">
-                <el-form-item label="工程类型">
+                <el-form-item label="球机名称">
                     <el-input
-                        v-model="queryParams.keyWord"
+                        v-model="queryParams_2.ballName"
-                        placeholder="请输入项目名称"
+                        placeholder="请输入球机名称"
+                        clearable
                     />
                 </el-form-item>
-                <el-form-item label="工程结构划分">
+                <el-form-item label="名称">
-                    <el-select
+                    <el-input
-                        v-model="queryParams.keyWord"
+                        v-model="queryParams_2.name"
-                        placeholder="请选择项目类型"
+                        placeholder="请输入名称"
+                        clearable
                     />
                 </el-form-item>
                 <el-form-item>
                     <el-button
                         size="mini"
                         type="primary"
-                        @click="onHandleQuery"
+                        @click="onHandleQuery_2"
                     >
                         查询
                     </el-button>
                     <el-button
                         size="mini"
                         type="primary"
-                        @click="onHandleAddProject"
+                        @click="onHandleReset_2"
-                        >新增</el-button
                     >
+                        重置
+                    </el-button>
+                    <el-button
+                        size="mini"
+                        type="primary"
+                        @click="onHandleAddProject"
+                    >
+                        新增
+                    </el-button>
                 </el-form-item>
             </el-form>
 
@@ -108,7 +162,22 @@
                     :label="column.label"
                     show-overflow-tooltip
                     v-for="column in tableColumns_1"
-                />
+                >
+                    <template slot-scope="scope">
+                        <!-- <img :src="scope.row.bast64" alt="" style="width: 100px; height: 100px;"> -->
+
+                        <template v-if="column.prop === 'bast64'">
+                            <img
+                                alt=""
+                                style="width: 48px; height: 48px"
+                                :src="`data:image/jpeg;base64,${scope.row.bast64}`"
+                            />
+                        </template>
+                        <template v-else>
+                            {{ scope.row[column.prop] }}
+                        </template>
+                    </template>
+                </el-table-column>
                 <el-table-column label="操作" align="center" width="140">
                     <template slot-scope="scope">
                         <el-button
@@ -137,10 +206,20 @@
             width="80%"
             v-if="addAndEditDialogVisible"
             :visible.sync="addAndEditDialogVisible"
-            :title="`${addAndEditDialogTitle}工程质量`"
+            :title="`${addAndEditDialogTitle}${safetyType}`"
         >
-            <AddAndEditForm ref="addAndEditFormRef" />
+            <AddAndEditFormOne
-
+                v-if="safetyType === '风险一本账'"
+                ref="addAndEditFormOneRef"
+                :detailsId="detailsOneId"
+                :editRow="editRow_1"
+            />
+            <AddAndEditFormTwo
+                v-if="safetyType === '视频风险分析'"
+                ref="addAndEditFormTwoRef"
+                :detailsId="detailsTwoId"
+                :editRow="editRow_2"
+            />
             <div slot="footer" class="dialog-footer">
                 <el-button @click="addAndEditDialogVisible = false">
                     关闭
@@ -155,126 +234,231 @@
 
 <script>
 import {
-    getProjectSafetyList,
+    getProjectSafetyAnalysisListAPI,
-    deleteProjectSafety,
+    deleteProjectSafetyAnalysisAPI,
+    getVideoSafetyAnalysisListAPI,
+    deleteVideoSafetyAnalysisAPI,
 } from '@/api/dataAnalysis/projectSafety'
 
-import AddAndEditForm from './components/addAndEditForm.vue'
+import AddAndEditFormOne from './components/addAndEditFormOne.vue'
+import AddAndEditFormTwo from './components/addAndEditFormTwo.vue'
 
 export default {
     name: 'ProjectQuality',
     components: {
-        AddAndEditForm,
+        AddAndEditFormOne,
+        AddAndEditFormTwo,
     },
     data() {
         return {
-            total: 0,
+            total_1: 0,
+            total_2: 0,
+            detailsOneId: '',
+            detailsTwoId: '',
+            editRow_1: {}, // 编辑风险一本账行
+            editRow_2: {}, // 编辑视频风险分析行
             safetyType: '风险一本账',
-            projectList: [
+            projectList: [], // 风险一本账列表
-                {
+            projectList_1: [], // 视频风险分析列表
-                    projectName: '工程类型',
-                    projectName: '工程结构划分',
-                    projectName: '总验收项',
-                    projectName: '已验收项',
-                    projectName: '已验收表数量',
-                },
-            ],
             addAndEditDialogVisible: false,
             addAndEditDialogTitle: '',
             tableColumns: [
                 {
-                    label: '风险销号',
+                    label: '风险编号',
-                    prop: 'projectName',
+                    prop: 'riskCode',
                 },
                 {
                     label: '作业部位',
-                    prop: 'projectName',
+                    prop: 'riskSite',
                 },
                 {
                     label: '风险等级',
-                    prop: 'projectName',
+                    prop: 'riskLevel',
                 },
                 {
                     label: '预控措施',
-                    prop: 'projectName',
+                    prop: 'controller',
                 },
                 {
                     label: '风险控制关键因素',
-                    prop: 'projectName',
+                    prop: 'riskController',
                 },
                 {
                     label: '开始日期',
-                    prop: 'projectName',
+                    prop: 'startTime',
                 },
                 {
                     label: '是否销号',
-                    prop: 'projectName',
+                    prop: 'isXh',
                 },
             ],
             tableColumns_1: [
                 {
-                    label: '**',
+                    label: '球机名称',
-                    prop: 'projectName',
+                    prop: 'ballName',
                 },
                 {
-                    label: 'x',
+                    label: '创建时间',
-                    prop: 'projectName',
+                    prop: 'createTime',
                 },
                 {
-                    label: '风险等级',
+                    label: '图片',
-                    prop: 'projectName',
+                    prop: 'bast64',
                 },
                 {
-                    label: '预控措施',
+                    label: '名称',
-                    prop: 'projectName',
+                    prop: 'name',
-                },
-                {
-                    label: '风险控制关键因素',
-                    prop: 'projectName',
-                },
-                {
-                    label: '开始日期',
-                    prop: 'projectName',
-                },
-                {
-                    label: '是否销号',
-                    prop: 'projectName',
                 },
             ],
-            queryParams: {
+            queryParams_1: {
                 pageNum: 1,
                 pageSize: 10,
-                keyWord: '',
+                riskCode: '',
+                riskSite: '',
+                riskLevel: '',
+            },
+            queryParams_2: {
+                pageNum: 1,
+                pageSize: 10,
+                ballName: '',
+                name: '',
             },
         }
     },
 
+    created() {
+        this.getProjectSafetyAnalysisList()
+        this.getVideoSafetyAnalysisList()
+    },
+
     methods: {
         onHandleQuery() {
-            this.getProjectList()
+            this.getProjectSafetyAnalysisList()
+        },
+        onHandleQuery_2() {
+            this.getVideoSafetyAnalysisList()
+        },
+        onHandleReset_2() {
+            this.queryParams_2 = {
+                pageNum: 1,
+                pageSize: 10,
+                ballName: '',
+                name: '',
+            }
+            this.getVideoSafetyAnalysisList()
         },
         onHandleAddProject() {
             this.addAndEditDialogVisible = true
             this.addAndEditDialogTitle = '新增'
         },
-        // 获取工程质量列表
+
-        getProjectList() {},
+        onHandleReset() {
+            this.queryParams_1 = {
+                pageNum: 1,
+                pageSize: 10,
+                riskCode: '',
+                riskSite: '',
+                riskLevel: '',
+            }
+            this.getProjectSafetyAnalysisList()
+        },
+        // 获取风险一本账列表
+        async getProjectSafetyAnalysisList() {
+            const res = await getProjectSafetyAnalysisListAPI(
+                this.queryParams_1,
+            )
+
+            this.projectList = res.rows
+            this.total_1 = res.total
+        },
+
+        // 获取视频风险分析列表
+        async getVideoSafetyAnalysisList() {
+            const res = await getVideoSafetyAnalysisListAPI(this.queryParams_2)
+            this.projectList_1 = res.rows
+            this.total_2 = res.total
+        },
 
         // 新增工程质量
         addProjectQuality() {},
 
-        // 编辑工程质量
+        // 编辑视频风险分析行
-        onHandleEditProject() {
+        onHandleEditProject(row) {
+            this.editRow_2 = row
+            this.detailsTwoId = row.id
             this.addAndEditDialogVisible = true
             this.addAndEditDialogTitle = '编辑'
         },
 
-        // 删除工程质量
+        // 删除视频风险分析行
-        onHandleDeleteProject() {},
+        onHandleDeleteProject(row) {
+            this.$confirm('确定删除该视频风险分析行吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(async () => {
+                const res = await deleteVideoSafetyAnalysisAPI({ id: row.id })
+                if (res.code === 200) {
+                    this.$message.success('删除成功')
+                    this.getVideoSafetyAnalysisList()
+                } else {
+                    this.$message.error('删除失败')
+                }
+            })
+        },
+
+        // 编辑风险一本账行
+        onHandleEditProject_1(row) {
+            this.editRow_1 = row
+            this.detailsOneId = row.id
+            this.addAndEditDialogVisible = true
+            this.addAndEditDialogTitle = '编辑'
+        },
+
+        // 删除风险一本账行
+        onHandleDeleteProject_1(row) {
+            this.$confirm('确定删除该风险一本账行吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(async () => {
+                const res = await deleteProjectSafetyAnalysisAPI({ id: row.id })
+                if (res.code === 200) {
+                    this.$message.success('删除成功')
+                    this.getProjectSafetyAnalysisList()
+                } else {
+                    this.$message.error('删除失败')
+                }
+            })
+        },
 
         // 提交工程质量
-        onHandleSubmit() {
+        async onHandleSubmit() {
-            this.$refs.addAndEditFormRef.submitForm()
+            if (this.safetyType === '风险一本账') {
+                const res = await this.$refs.addAndEditFormOneRef.submitForm()
+                if (res) {
+                    this.$message.success(
+                        this.addAndEditDialogTitle === '新增'
+                            ? '新增成功'
+                            : '编辑成功',
+                    )
+                    this.getProjectSafetyAnalysisList()
+                    this.addAndEditDialogVisible = false
+                } else {
+                    this.$message.error('提交失败')
+                }
+            } else {
+                const res = await this.$refs.addAndEditFormTwoRef.submitForm()
+                if (res) {
+                    this.$message.success(
+                        this.addAndEditDialogTitle === '新增'
+                            ? '新增成功'
+                            : '编辑成功',
+                    )
+                    this.getVideoSafetyAnalysisList()
+                    this.addAndEditDialogVisible = false
+                } else {
+                    this.$message.error('提交失败')
+                }
+            }
         },
     },
 }
@@ -289,9 +473,9 @@ export default {
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) !important;
-    height: 90vh !important;
+    // height: 90vh !important;
-    min-height: 90vh !important;
+    // min-height: 90vh !important;
-    max-height: 90vh !important;
+    // max-height: 90vh !important;
     .el-dialog__body {
         flex: 1 !important;
         overflow-y: scroll !important;