From 169c4730c227b35e7d061326aebe9f978f0ab4c8 Mon Sep 17 00:00:00 2001
From: shishuaikang <280848880@qq.com>
Date: 星期二, 21 十一月 2023 10:43:31 +0800
Subject: [PATCH] web:安全管理=>区域巡检提交
---
web/src/api/modules/safety.js | 16
web/src/views/SecureManage/RiskGrad/AreaPolling.vue | 391 --------------------
web/src/views/SecureManage/RiskGrad/components/TaskPunchcard.vue | 318 ++++++++++++++++
web/src/components/element/Table.vue | 4
web/src/views/SecureManage/RiskGrad/components/PollingTask.vue | 405 +++++++++++++++++++++
web/src/plugins/directive.js | 1
6 files changed, 751 insertions(+), 384 deletions(-)
diff --git a/web/src/api/modules/safety.js b/web/src/api/modules/safety.js
index 7926c5f..ad2c24f 100644
--- a/web/src/api/modules/safety.js
+++ b/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,
+ }),
}
},
/**
diff --git a/web/src/components/element/Table.vue b/web/src/components/element/Table.vue
index 6460b08..cea6aa4 100644
--- a/web/src/components/element/Table.vue
+++ b/web/src/components/element/Table.vue
@@ -150,5 +150,9 @@
overflow: auto;
border: none;
height: 100%;
+
+ ::v-deep .cell {
+ white-space: pre-wrap;
+ }
}
</style>
\ No newline at end of file
diff --git a/web/src/plugins/directive.js b/web/src/plugins/directive.js
index ded1455..cbc0d89 100644
--- a/web/src/plugins/directive.js
+++ b/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)
}
diff --git a/web/src/views/SecureManage/RiskGrad/AreaPolling.vue b/web/src/views/SecureManage/RiskGrad/AreaPolling.vue
index 5a9c94f..3a0ed7f 100644
--- a/web/src/views/SecureManage/RiskGrad/AreaPolling.vue
+++ b/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>
\ No newline at end of file
diff --git a/web/src/views/SecureManage/RiskGrad/components/PollingTask.vue b/web/src/views/SecureManage/RiskGrad/components/PollingTask.vue
new file mode 100644
index 0000000..e02fce3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/web/src/views/SecureManage/RiskGrad/components/TaskPunchcard.vue b/web/src/views/SecureManage/RiskGrad/components/TaskPunchcard.vue
new file mode 100644
index 0000000..b0063ac
--- /dev/null
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3