web:安全管理=>区域巡检提交

shishuaikang

2023-11-21 169c4730c227b35e7d061326aebe9f978f0ab4c8

web:安全管理=>区域巡检提交

 web/src/api/modules/safety.js

@@ -236,11 +236,21 @@
    },

    // 区域巡检

    polling: {

      getLists: params =>

        axios.post('/secure/regioninspection/selectPageList', params),

      /* 巡检任务 */

      getLists: params => axios.post('/secure/regioninspection/selectPageList', params),

      insert: params => axios.post('/secure/regioninspection/insertAndUpdate', params),

      update: params => axios.post('/secure/regioninspection/insertAndUpdate', params),

      delete: params => axios.get('/secure/regioninspection/delete', { params })

      delete: params => axios.get('/secure/regioninspection/delete', { params }),

      /* 任务打卡 */

      taskcardGetlists: params => axios.post('/secure/regionInspectionRecord/selectPageList', params),

      taskcardGetregions: params => axios.post('/secure/regionInspectionRecord/selectInfo', params),

      taskcardGetregionInfo: params => axios.post('/secure/regionInspectionRecord/regionInfo', params),

      taskcardExport: params => axios({

        method: 'post',

        url:'/secure/regionInspectionRecord/export',

        responseType:'blob',

        data: params,

      }),

    }

  },

  /**


 web/src/components/element/Table.vue

@@ -150,5 +150,9 @@
  overflow: auto;

  border: none;

  height: 100%;



  ::v-deep .cell {

    white-space: pre-wrap;

  }

}

</style>

 web/src/plugins/directive.js

@@ -12,6 +12,7 @@
      value === 'insert' && (el.className += ' search_btn')

      value === 'update' && (el.className += ' table_btn')

      value === 'delete' && (el.className += ' delete_btn')

      value === 'export' && (el.className += ' search_btn')

    } else {

      el.parentNode.removeChild(el)

    }


 web/src/views/SecureManage/RiskGrad/AreaPolling.vue

@@ -7,400 +7,29 @@
                <el-tab-pane label="任务打卡" name="second"></el-tab-pane>

            </el-tabs>

        </div>

        <div class="main_header">

            <div class="header_item">

                <span class="header_label">巡检任务：</span>

                <el-input size="mini" v-model="queryInfo.task" placeholder="请输入巡检任务" clearable></el-input>

            </div>

            <div class="header_item">

                <span class="header_label">巡检人员：</span>

                <el-input size="mini" v-model="queryInfo.realName" placeholder="请输入巡检人员" clearable></el-input>

            </div>

            <div class="header_item">

                <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>

                <el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>

            </div>

        </div>

        <div class="main_content">

            <cpn-table :table-index="true" :table-loading="tableConfig.loading" :table-data="tableConfig.tableData"

                :table-columns="tableConfig.tableColumns" :page-total="tableConfig.total" :page-num.sync="queryInfo.pageNum"

                :page-size.sync="queryInfo.pageSize" :page-change="pageChange">

            </cpn-table>

        </div>

        <!-- dialog -->

        <el-dialog width="400px" class="prop_dialog" v-if="isRenderDialog" :title="dialogTitle" :visible.sync="asyncVisible"

            @close="closeForm">



            <!-- <cpn-form :form-config="formConfig" :form-items="formConfig.formItems"></cpn-form> -->



            <el-form class="rule_form" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">



                <el-form-item label="巡检任务:" prop="task">

                    <el-input v-model="ruleForm.task" placeholder="请输入巡检任务" clearable></el-input>

                </el-form-item>



                <el-form-item label="巡检标准:" prop="standard">

                    <el-input type="textarea" v-model="ruleForm.standard" placeholder="请输入巡检标准" clearable></el-input>

                </el-form-item>



                <el-form-item label="巡检人员:" prop="realNames">

                    <el-select v-model="ruleForm.realNames" multiple value-key="id" placeholder="请选择巡检人员">

                        <el-option v-for="item in allPersons" :key="item.id" :label="item.label" :value="item"></el-option>

                    </el-select>

                </el-form-item>



                <div class="divider"><span>巡检路线</span></div>



                <el-form-item label-width="0" v-for="(itemP, index) in ruleForm.paths " :key="index" :prop="'paths.' +

                    index + '.value'" :rules="{ required: true, message: '请选择巡检路线', trigger: 'change' }">

                    <el-select style="margin-right: 10px;width: 323px;" v-model="itemP.value" value-key="id"

                        placeholder="请选择巡检路线">

                        <el-option v-for=" item in allPath" :key="item.id" :label="item.label" :value="item"></el-option>

                    </el-select>

                    <el-button class="delete_btn" @click="delPath(itemP)">删除</el-button>

                    <el-button class="table_btn" v-show="index === ruleForm.paths.length - 1"

                        @click="addPath">添加</el-button>

                </el-form-item>

                <!-- <el-form-item label="区域名称:" prop="regionHazardInformId">

                    <el-select v-model="ruleForm.regionHazardInformId" placeholder="请选择区域名称">

                        <el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">

                        </el-option>

                    </el-select>

                </el-form-item> -->

            </el-form>

            <div slot="footer">

                <el-button @click="asyncVisible = false">取 消</el-button>

                <el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>

            </div>

        </el-dialog>

        <component :is="cpns[activeName]"></component>

    </div>

</template>

<script>

import {throttle} from '@/plugins/public'

import cpnTable from '@/components/element/Table'

// import cpnForm from '@/components/element/Form'

import PollingTask from './components/PollingTask' // 巡检任务

import TaskPunchcard from './components/TaskPunchcard' // 任务打卡

export default {

    data() {

        return {

            isRenderDialog: false,

            asyncVisible: false,

            activeName: 'first', // tabs切换

            submitMode: '', // 提交方式: add / update

            allPersons: [], // 巡检人员

            allPath: [], // 巡检路线

            queryInfo: {

                pageNum: 1,

                pageSize: 10,

                task: '',

                realName: '',

            },

            ruleForm: {

                id: '',

                task: '',

                standard: '',

                realNames: [],

                paths: [

                    {value: ''},

                ],

            },

            rules: {

                task: [{required: true, message: '请输入巡检任务', trigger: 'blur'}],

                standard: [{required: true, message: '请输入巡检标准', trigger: 'blur'}],

                realNames: [{required: true, message: '请选择巡检人员', trigger: 'change'}],

            },

            tableConfig: {

                loading: true,

                tableData: [],

                tableColumns: [],

                total: 0,

            },

            formConfig: {}

            activeName: 'first',

            cpns: {

                first: 'PollingTask',

                second: 'TaskPunchcard',

            }

        }

    },

    components: {

        cpnTable,

        // cpnForm,

        PollingTask,

        TaskPunchcard,

    },

    computed: {

        isUpdate() {

            return this.submitMode === 'update'

        },

        dialogTitle() {

            return this.isUpdate ? '修改巡检任务' : '新增巡检任务'

        },

    },

    beforeCreate() {

        this.$http = this.$api.Safety.RiskGrad.polling

    },

    created() {

        this.setTableColumn()

        this.setFormColumn()

        this.getLists()

    },

    methods: {

        // 获取table列表数据

        getLists() {

            let params = this.queryInfo

            let tableConfig = this.tableConfig

            this.$http.getLists(params).then(res => {

                if (res.statusMsg === 'ok') {

                    tableConfig.total = res.data.total

                    tableConfig.tableData = res.data.list

                }

                tableConfig.loading = false

            })

        },

        // 获取管服人员数据(巡检人员)

        getPerson() {

            return new Promise(resolve => {

                this.$api.Personnerl.SEARCHMORTGAGEELIST({

                    userType: 1,

                    pageNum: 1,

                    pageSize: 9999

                }).then((res) => {

                    if (res.success) {

                        const list = res.data.list

                        const out = []

                        list.forEach(item => {

                            out.push({

                                id: item.userId,

                                label: item.realName,

                            })

                        })

                        this.allPersons.push(...out)

                        resolve()

                    }

                })

            })

        },

        // 获取巡检路线

        getPath() {

            new Promise(resolve => {

                this.$api.Safety.RiskGrad.warning.getLists({

                    pageNum: 1,

                    pageSize: 9999

                }).then((res) => {

                    if (res.success) {

                        const list = res.data.list

                        const out = []

                        list.forEach(item => {

                            out.push({

                                id: item.id,

                                label: item.region

                            })

                        })

                        this.allPath.push(...out)

                        resolve()

                    }

                })

            })

        },

        // 初始化 table 配置

        setTableColumn() {

            this.tableConfig.tableColumns = [

                {index: true},

                {name: "巡检任务", key: "task"},

                {name: "巡检标准", key: "standard"},

                {name: "巡检人员", key: "regionUsersList", formatter: row => row.realNames},

                {name: "巡检路线", key: "regionList", formatter: row => row.regions},

                {

                    operation: true, name: "操作", width: 140, value: [

                        {name: "修改", permission: "update", handleRow: this.updateRow},

                        {name: "删除", permission: "delete", handleRow: this.deleteRow},]

                },

            ]

        },

        // 初始化 form 配置

        setFormColumn() {

            this.formConfig = {

                formModels: {

                    task: '',

                    standard: '',

                    realNames: [],

                },

                formItems: [

                    {type: 'input', label: '巡检任务'},

                    {type: 'textarea', label: '巡检标准'},

                    {

                        type: 'select', label: '用户状态', options: this.allPersons,

                    }

                    // {

                    //     type: 'datepicker', label: '创建时间', otherOptions: {

                    //         startPlaceholder: '开始时间',

                    //         endPlaceholder: '结束时间',

                    //         type: 'daterange',

                    //         'unlink-panels': true

                    //     }

                    // }

                ],

                itemColLayout: {

                    span: 8

                }

            }

        },

        // 查询按钮列表信息

        queryReset() {

            this.queryInfo.pageNum = 1

            this.queryInfo.pageSize = 10

            this.getLists()

        },

        // 重置表单

        resetForm(formName) {

            this.$refs[formName].resetFields()

            this.ruleForm.paths = [{value: ''}]

        },

        // 显示表单

        async showForm() {

            !this.allPath.length && this.getPath()

            !this.allPersons.length && this.getPerson()

            !this.isRenderDialog && (this.isRenderDialog = true)

            this.asyncVisible = true

        },

        closeForm() {

            this.resetForm('ruleForm')

            this.asyncVisible = false

        },

        // 添加数据

        addRow() {

            this.submitMode = 'add'

            this.showForm()





            console.log(this.allPersons)

            console.log(this.formConfig)

        },

        updateRow(row) {

            this.submitMode = 'update'

            this.showForm()

            this.$nextTick(() => {

                const {id, task, standard, regionUsersList, regionList} = row

                const realNames = regionUsersList.map(item => {

                    return {

                        id: item.userId,

                        label: item.realName,

                    }

                })

                const paths = regionList.map(item => {

                    return {

                        value: {

                            id: item.regionHazardInformId,

                            label: item.region,

                        },

                    }

                })

                this.ruleForm = {

                    id,

                    task,

                    standard,

                    realNames,

                    paths,

                }

            })

        },

        deleteRow(row) {

            const params = {id: row.id}

            this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {

                confirmButtonText: "确定",

                cancelButtonText: "取消",

                type: "warning"

            }).then(() => {

                this.$http.delete(params).then(res => {

                    if (res.statusMsg === 'ok') {

                        this.queryReset()

                        this.$message.success("删除成功！")

                    } else {

                        this.$message.warning(res.statusMsg)

                    }

                })

            }).catch(() => {

                this.$message.warning("您已取消")

            })



        },

        // 提交表单

        onSubmit: throttle(function (formName) {

            this.$refs[formName].validate(valid => {

                if (!valid) return

                const {id, task, standard, realNames, paths} = this.ruleForm

                const regionList = paths.map((item, index) => {

                    return {

                        sort: index + 1,

                        regionHazardInformId: item.value.id,

                    }

                })

                const regionUsersList = realNames.map(item => {

                    return {

                        userId: item.id,

                    }

                })

                const params = {

                    task,

                    standard,

                    regionList,

                    regionUsersList,

                }

                if (this.isUpdate) {

                    // 更新

                    params.id = id

                    this.$http.update(params).then((res) => {

                        if (res.statusMsg === 'ok') {

                            this.closeForm()

                            this.getLists()

                            this.$message.success('更新成功！')

                        } else {

                            this.$message.warning(res.statusMsg)

                        }

                    })

                } else {

                    // 添加

                    this.$http.insert(params).then((res) => {

                        if (res.statusMsg === 'ok') {

                            this.closeForm()

                            this.getLists()

                            this.$message.success('添加成功！')

                        } else {

                            this.$message.warning(res.statusMsg)

                        }

                    })

                }

            })

        }, 1000),

        addPath() {

            this.ruleForm.paths.push({

                value: ''

            })

        },

        delPath(item) {

            var index = this.ruleForm.paths.indexOf(item)

            if (index !== -1) {

                this.ruleForm.paths.splice(index, 1)

            }

        },

        pageChange() {

            this.getLists()

        },

    }

}

</script>



<style lang="scss" scoped>

@import '@/style/layout-main.scss';



.divider {

    position: relative;

    margin-bottom: 30px;

    text-indent: 10px;

    color: #fff;

    border-left: 3px solid #18F6F8;



    &::after {

        content: "";

        position: absolute;

        left: 0;

        bottom: -8px;

        width: 100%;

        padding: 20px 0;

        border-bottom: 1px solid #0C4D6F;

    }

}

</style>

 web/src/views/SecureManage/RiskGrad/components/PollingTask.vue

对比新文件
@@ -0,0 +1,405 @@
<!-- 安全管理 ==> 风险分级管控 => 区域巡检(巡检任务)-->

<template>

    <div>

        <div class="main_header">

            <div class="header_item">

                <span class="header_label">巡检任务：</span>

                <el-input size="mini" v-model="queryInfo.task" placeholder="请输入巡检任务" clearable></el-input>

            </div>

            <div class="header_item">

                <span class="header_label">巡检人员：</span>

                <el-input size="mini" v-model="queryInfo.realName" placeholder="请输入巡检人员" clearable></el-input>

            </div>

            <div class="header_item">

                <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>

                <el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>

            </div>

        </div>

        <div class="main_content">

            <cpn-table :table-index="true" :table-loading="tableConfig.loading" :table-data="tableConfig.tableData"

                :table-columns="tableConfig.tableColumns" :page-total="tableConfig.total" :page-num.sync="queryInfo.pageNum"

                :page-size.sync="queryInfo.pageSize" :page-change="pageChange">

            </cpn-table>

        </div>

        <!-- dialog -->

        <el-dialog width="400px" class="prop_dialog" v-if="isRenderDialog" :title="dialogTitle" :visible.sync="asyncVisible"

            @close="closeForm">



            <!-- <cpn-form :form-config="formConfig" :form-items="formConfig.formItems"></cpn-form> -->



            <el-form class="rule_form" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">



                <el-form-item label="巡检任务:" prop="task">

                    <el-input v-model="ruleForm.task" placeholder="请输入巡检任务" clearable></el-input>

                </el-form-item>



                <el-form-item label="巡检标准:" prop="standard">

                    <el-input type="textarea" v-model="ruleForm.standard" placeholder="请输入巡检标准" clearable></el-input>

                </el-form-item>



                <el-form-item label="巡检人员:" prop="realNames">

                    <el-select v-model="ruleForm.realNames" multiple value-key="id" placeholder="请选择巡检人员">

                        <el-option v-for="item in allPersons" :key="item.id" :label="item.label" :value="item"></el-option>

                    </el-select>

                </el-form-item>



                <div class="divider"><span>巡检路线</span></div>



                <el-form-item label-width="0" v-for="(itemP, index) in ruleForm.paths " :key="index" :prop="'paths.' +

                    index + '.value'" :rules="{ required: true, message: '请选择巡检路线', trigger: 'change' }">

                    <el-select style="margin-right: 10px;width: 323px;" v-model="itemP.value" value-key="id"

                        placeholder="请选择巡检路线">

                        <el-option v-for=" item in allPath" :key="item.id" :label="item.label" :value="item"></el-option>

                    </el-select>

                    <el-button class="delete_btn" @click="delPath(itemP)">删除</el-button>

                    <el-button class="table_btn" v-show="index === ruleForm.paths.length - 1"

                        @click="addPath">添加</el-button>

                </el-form-item>

                <!-- <el-form-item label="区域名称:" prop="regionHazardInformId">

                    <el-select v-model="ruleForm.regionHazardInformId" placeholder="请选择区域名称">

                        <el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">

                        </el-option>

                    </el-select>

                </el-form-item> -->

            </el-form>

            <div slot="footer">

                <el-button @click="asyncVisible = false">取 消</el-button>

                <el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>

            </div>

        </el-dialog>

    </div>

</template>

<script>

import {throttle} from '@/plugins/public'

import cpnTable from '@/components/element/Table'

// import cpnForm from '@/components/element/Form'

export default {

    data() {

        return {

            isRenderDialog: false,

            asyncVisible: false,

            submitMode: '', // 提交方式: add / update

            allPersons: [], // 巡检人员

            allPath: [], // 巡检路线

            queryInfo: {

                pageNum: 1,

                pageSize: 10,

                task: '',

                realName: '',

            },

            ruleForm: {

                id: '',

                task: '',

                standard: '',

                realNames: [],

                paths: [

                    {value: ''},

                ],

            },

            rules: {

                task: [{required: true, message: '请输入巡检任务', trigger: 'blur'}],

                standard: [{required: true, message: '请输入巡检标准', trigger: 'blur'}],

                realNames: [{required: true, message: '请选择巡检人员', trigger: 'change'}],

            },

            tableConfig: {

                loading: '',

                tableData: [],

                tableColumns: [],

                total: 0,

            },

            formConfig: {}

        }

    },

    components: {

        cpnTable,

        // cpnForm,

    },

    computed: {

        isUpdate() {

            return this.submitMode === 'update'

        },

        dialogTitle() {

            return this.isUpdate ? '修改巡检任务' : '新增巡检任务'

        },

    },

    beforeCreate() {

        this.$http = this.$api.Safety.RiskGrad.polling

    },

    created() {

        this.setTableColumn()

        this.setFormColumn()

        this.getLists()

    },

    methods: {

        // 获取table列表数据

        getLists() {

            let params = this.queryInfo

            let tableConfig = this.tableConfig

            tableConfig.loading = true

            this.$http.getLists(params).then(res => {

                if (res.statusMsg === 'ok') {

                    tableConfig.total = res.data.total

                    tableConfig.tableData = res.data.list

                }

                tableConfig.loading = false

            })

        },

        // 获取管服人员数据(巡检人员)

        getPerson() {

            return new Promise(resolve => {

                this.$api.Personnerl.SEARCHMORTGAGEELIST({

                    userType: 1,

                    pageNum: 1,

                    pageSize: 9999

                }).then((res) => {

                    if (res.success) {

                        const list = res.data.list

                        const out = []

                        list.forEach(item => {

                            out.push({

                                id: item.userId,

                                label: item.realName,

                            })

                        })

                        this.allPersons.push(...out)

                        resolve()

                    }

                })

            })

        },

        // 获取巡检路线

        getPath() {

            new Promise(resolve => {

                this.$api.Safety.RiskGrad.warning.getLists({

                    pageNum: 1,

                    pageSize: 9999

                }).then((res) => {

                    if (res.success) {

                        const list = res.data.list

                        const out = []

                        list.forEach(item => {

                            out.push({

                                id: item.id,

                                label: item.region

                            })

                        })

                        this.allPath.push(...out)

                        resolve()

                    }

                })

            })

        },

        // 初始化 table 配置

        setTableColumn() {

            this.tableConfig.tableColumns = [

                {index: true},

                {name: "巡检任务", key: "task"},

                {name: "巡检标准", key: "standard"},

                {name: "巡检人员", key: "regionUsersList", formatter: row => row.realNames},

                {

                    name: "巡检路线", align: 'left', key: "regions", formatter: row => {

                        return row.regions.replace(/,/g, ',\n')

                    }

                },

                {

                    name: "巡检状态", key: "status", width: 120, formatter: row => {

                        return row.status === 1 ? '已完成' : '待巡检'

                    }

                },

                {

                    operation: true, name: "操作", width: 140, value: [

                        {name: "修改", permission: "update", handleRow: this.updateRow},

                        {name: "删除", permission: "delete", handleRow: this.deleteRow},]

                },

            ]

        },

        // 初始化 form 配置

        setFormColumn() {

            this.formConfig = {

                formModels: {

                    task: '',

                    standard: '',

                    realNames: [],

                },

                formItems: [

                    {type: 'input', label: '巡检任务'},

                    {type: 'textarea', label: '巡检标准'},

                    {

                        type: 'select', label: '用户状态', options: this.allPersons,

                    }

                    // {

                    //     type: 'datepicker', label: '创建时间', otherOptions: {

                    //         startPlaceholder: '开始时间',

                    //         endPlaceholder: '结束时间',

                    //         type: 'daterange',

                    //         'unlink-panels': true

                    //     }

                    // }

                ],

                itemColLayout: {

                    span: 8

                }

            }

        },

        // 查询按钮列表信息

        queryReset() {

            this.queryInfo.pageNum = 1

            this.queryInfo.pageSize = 10

            this.getLists()

        },

        // 重置表单

        resetForm(formName) {

            this.$refs[formName].resetFields()

            this.ruleForm.paths = [{value: ''}]

        },

        // 显示表单

        async showForm() {

            !this.allPath.length && this.getPath()

            !this.allPersons.length && this.getPerson()

            !this.isRenderDialog && (this.isRenderDialog = true)

            this.asyncVisible = true

        },

        closeForm() {

            this.resetForm('ruleForm')

            this.asyncVisible = false

        },

        // 添加数据

        addRow() {

            this.submitMode = 'add'

            this.showForm()

        },

        updateRow(row) {

            this.submitMode = 'update'

            this.showForm()

            this.$nextTick(() => {

                const {id, task, standard, regionUsersList, regionList} = row

                const realNames = regionUsersList.map(item => {

                    return {

                        id: item.userId,

                        label: item.realName,

                    }

                })

                const paths = regionList.map(item => {

                    return {

                        value: {

                            id: item.regionHazardInformId,

                            label: item.region,

                        },

                    }

                })

                this.ruleForm = {

                    id,

                    task,

                    standard,

                    realNames,

                    paths,

                }

            })

        },

        deleteRow(row) {

            const params = {id: row.id}

            this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {

                confirmButtonText: "确定",

                cancelButtonText: "取消",

                type: "warning"

            }).then(() => {

                this.$http.delete(params).then(res => {

                    if (res.statusMsg === 'ok') {

                        this.queryReset()

                        this.$message.success("删除成功！")

                    } else {

                        this.$message.warning(res.statusMsg)

                    }

                })

            }).catch(() => {

                this.$message.warning("您已取消")

            })



        },

        // 提交表单

        onSubmit: throttle(function (formName) {

            this.$refs[formName].validate(valid => {

                if (!valid) return

                const {id, task, standard, realNames, paths} = this.ruleForm

                const regionList = paths.map((item, index) => {

                    return {

                        sort: index + 1,

                        regionHazardInformId: item.value.id,

                    }

                })

                const regionUsersList = realNames.map(item => {

                    return {

                        userId: item.id,

                    }

                })

                const params = {

                    task,

                    standard,

                    regionList,

                    regionUsersList,

                }

                if (this.isUpdate) {

                    // 更新

                    params.id = id

                    this.$http.update(params).then((res) => {

                        if (res.statusMsg === 'ok') {

                            this.closeForm()

                            this.getLists()

                            this.$message.success('更新成功！')

                        } else {

                            this.$message.warning(res.statusMsg)

                        }

                    })

                } else {

                    // 添加

                    this.$http.insert(params).then((res) => {

                        if (res.statusMsg === 'ok') {

                            this.closeForm()

                            this.getLists()

                            this.$message.success('添加成功！')

                        } else {

                            this.$message.warning(res.statusMsg)

                        }

                    })

                }

            })

        }, 1000),

        addPath() {

            this.ruleForm.paths.push({

                value: ''

            })

        },

        delPath(item) {

            var index = this.ruleForm.paths.indexOf(item)

            if (index !== -1) {

                this.ruleForm.paths.splice(index, 1)

            }

        },

        pageChange() {

            this.getLists()

        },

    }

}

</script>



<style lang="scss" scoped>

@import '@/style/layout-main.scss';



.divider {

    position: relative;

    margin-bottom: 30px;

    text-indent: 10px;

    color: #fff;

    border-left: 3px solid #18F6F8;



    &::after {

        content: "";

        position: absolute;

        left: 0;

        bottom: -8px;

        width: 100%;

        padding: 20px 0;

        border-bottom: 1px solid #0C4D6F;

    }

}

</style>

 web/src/views/SecureManage/RiskGrad/components/TaskPunchcard.vue

对比新文件
@@ -0,0 +1,318 @@
<!-- 安全管理 ==> 风险分级管控 => 区域巡检(任务打卡)-->

<template>

    <div>

        <div class="main_header">

            <div class="header_item">

                <span class="header_label">巡检人：</span>

                <el-input size="mini" v-model="queryInfo.realName" placeholder="请输入巡检人" clearable></el-input>

            </div>

            <div class="header_item">

                <span class="header_label">巡检状态：</span>

                <el-select size="mini" v-model="queryInfo.status">

                    <el-option v-for="item in queryStatus" :key="item.value" :label="item.label" :value="item.value"

                        placeholder="请选择巡检状态"></el-option>

                </el-select>

            </div>

            <div class="header_item">

                <span class="header_label">时间范围：</span>

                <el-date-picker type="daterange" v-model="times" value-format="yyyy-MM-dd" start-placeholder="起始时间"

                    end-placeholder="结束时间" @change="changeTime" clear></el-date-picker>

            </div>

            <div class="header_item">

                <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>

                <el-button icon="el-icon-plus" v-permission="'export'" @click="exportExcel">导出Excel</el-button>

            </div>

        </div>

        <div class="main_content">

            <cpn-table :table-index="true" :table-loading="tableConfig.loading" :table-data="tableConfig.tableData"

                :table-columns="tableConfig.tableColumns" :page-total="tableConfig.total" :page-num.sync="queryInfo.pageNum"

                :page-size.sync="queryInfo.pageSize" :page-change="pageChange">

            </cpn-table>

        </div>



        <!-- 详情dialog -->

        <el-dialog width="400px" class="prop_dialog" v-if="isRenderDialog" title="详情" :visible.sync="asyncVisible">



            <el-form class="rule_form" label-width="auto">



                <div class="divider"></div>



                <el-form-item label="巡检任务:">{{ info.task }}</el-form-item>



                <el-form-item label="巡检标准:">{{ info.standard }}</el-form-item>



                <el-form-item label="巡检人员:">{{ info.name }}</el-form-item>



                <div class="divider"><span>巡检路线</span></div>



                <div class="regions">

                    <div class="region" v-for="item in info.regions" :key="item.regionId"

                        @click="regionClick(item.regionId)">{{

                            item.region }}

                    </div>

                </div>

            </el-form>

        </el-dialog>



        <!-- 区域信息dialog -->

        <el-dialog width="400px" class="prop_dialog" v-if="regionInfos.isRenderDialog" title="详情"

            :visible.sync="regionInfos.asyncVisible">



            <el-form class="rule_form" label-width="auto">



                <div class="divider"></div>



                <el-form-item label="巡检时间:">{{ regionInfos.time }}</el-form-item>



                <el-form-item label="巡检区域:">{{ regionInfos.region }}</el-form-item>



                <el-form-item label="巡检结果:">{{ regionInfos.res }}</el-form-item>



                <el-form-item label="上传图片:">

                    <el-image class="image" v-for="(item, index) in regionInfos.img" :key="index" :src="item" fit="contain"

                        :preview-src-list="regionInfos.img"></el-image>

                </el-form-item>



                <el-form-item label="获取当前位置:">{{ regionInfos.location }}</el-form-item>

            </el-form>

        </el-dialog>

    </div>

</template>

<script>

import cpnTable from '@/components/element/Table'

import {downFiles} from '@/plugins/public'

export default {

    data() {

        return {

            isRenderDialog: false,

            asyncVisible: false,

            info: { // 详情信息

                task: '',

                standard: '',

                name: '',

                regions: [],

            },

            userId: '', // 存储点击后的用户id

            taskId: '', // 存储点击后的巡检任务id

            times: [], // 时间范围

            queryStatus: [

                {value: '0', label: '待巡检'},

                {value: '1', label: '已完成'},

            ],

            queryInfo: {

                pageNum: 1,

                pageSize: 10,

                status: '',

                realName: '',

                startTime: '',

                endTime: '',

            },

            tableConfig: {

                loading: '',

                tableData: [],

                tableColumns: [],

                total: 0,

            },

            regionInfos: { // 巡检路线详情

                isRenderDialog: false,

                asyncVisible: false,

                time: '', // 巡检时间

                region: '', // 巡检区域

                res: '', // 巡检结果

                img: '', // 上传的图片

                location: '', // 位置

            }

        }

    },

    components: {

        cpnTable,

    },

    beforeCreate() {

        this.$http = this.$api.Safety.RiskGrad.polling

    },

    created() {

        this.setTableColumn()

        this.getLists()

    },

    methods: {

        // 获取table列表数据

        getLists() {

            let params = this.queryInfo

            let tableConfig = this.tableConfig

            tableConfig.loading = true

            this.$http.taskcardGetlists(params).then(res => {

                if (res.statusMsg === 'ok') {

                    tableConfig.total = res.data.total

                    tableConfig.tableData = res.data.list

                }

                tableConfig.loading = false

            })

        },

        // 获取巡检路线的id (用来点击展示详情)

        getRegionId() {



        },

        // 初始化 table 配置

        setTableColumn() {

            this.tableConfig.tableColumns = [

                {index: true},

                {name: "巡检时间", key: "inspectionTime"},

                {name: "巡检任务", key: "task"},

                {

                    name: "巡检路线", align: 'left', key: "region", formatter: row => {

                        return row.region.replace(/,/g, ',\n')

                    }

                },

                {name: "巡检人", key: "realName"},

                {

                    name: "巡检状态", key: "status", width: 120, formatter: row => {

                        return row.status === 1 ? '已完成' : '待巡检'

                    }

                },

                {

                    operation: true, name: "操作", width: 120, value: [

                        {name: "详情", handleRow: this.detailRow}]

                },

            ]

        },

        // 查询按钮列表信息

        queryReset() {

            this.queryInfo.pageNum = 1

            this.queryInfo.pageSize = 10

            this.getLists()

        },

        showDialog() {

            if (!this.isRenderDialog) {

                this.isRenderDialog = true

            }

            this.asyncVisible = true

        },

        showRegionDialog() {

            if (!this.regionInfos.isRenderDialog) {

                this.regionInfos.isRenderDialog = true

            }

            this.regionInfos.asyncVisible = true

        },

        detailRow(row) {

            this.info.task = row.task

            this.info.standard = row.standard

            this.info.name = row.realName

            this.info.regions = []



            this.userId = row.userId

            this.taskId = row.regionInspectionId

            const params = {

                userId: row.userId,

                regionInspectionId: row.regionInspectionId,

            }

            this.$http.taskcardGetregions(params).then(res => {

                if (res.statusMsg === 'ok') {

                    let regions = []

                    res.data.regionList.forEach(item => {

                        regions.push({

                            regionId: item.regionHazardInformId,

                            region: item.region,

                        })

                    })

                    this.info.regions.push(...regions)

                }

            })

            this.showDialog()

        },

        regionClick(regionId) {

            const params = {

                userId: this.userId,

                regionInspectionId: this.taskId,

                regionHazardInformId: regionId,

            }

            this.$http.taskcardGetregionInfo(params).then(res => {

                if (res.statusMsg === 'ok') {

                    this.regionInfos.time = res.data.inspectionTime

                    this.regionInfos.region = res.data.region

                    this.regionInfos.res = res.data.result

                    this.regionInfos.location = res.data.location

                    this.regionInfos.img = []



                    if (res.data.imgPaths) {

                        let arr = []

                        res.data.imgPaths.split(',').forEach(item => {

                            arr.push(process.env.VUE_APP_BASE_URL + '/' + item)

                        })

                        this.regionInfos.img.push(...arr)

                    }

                }

                this.showRegionDialog()

            })

        },

        exportExcel() {

            let params = this.queryInfo

            this.$http.taskcardExport(params).then(res => {

                downFiles(res, '任务打卡', 'xls')

            })

        },

        changeTime(times) {

            if (times.length) {

                this.queryInfo.startTime = times[0]

                this.queryInfo.endTime = times[1]

            }

        },

        pageChange() {

            this.getLists()

        },

    }

}

</script>



<style lang="scss" scoped>

@import '@/style/layout-main.scss';



.rule_form {

    color: #fff;



    ::v-deep .el-form-item__content {

        display: block;

    }



    .image {

        flex: none;

        width: 91px;

        height: 120px;

        margin-right: 15px;

        border-radius: 5px;

        border: 1px solid #0c5983;



        img {

            width: 100%;

        }

    }

}



.regions {

    text-align: center;



    .region {

        line-height: 34px;

        margin-bottom: 16px;

        background: rgba(56, 175, 247, .25);

        cursor: pointer;

    }

}



.divider {

    position: relative;

    margin-bottom: 30px;

    text-indent: 10px;

    color: #fff;

    border-left: 3px solid #18F6F8;



    &::after {

        content: "";

        position: absolute;

        left: 0;

        bottom: -8px;

        width: 100%;

        padding: 20px 0;

        border-bottom: 1px solid #0C4D6F;

    }

}

</style>